基于路由反应路由器的不同导航答案

【问题标题】：Different Nav based on route react router基于路由反应路由器的不同导航
【发布时间】：2021-03-17 19:00:27
【问题描述】：

您好，我确实使用了搜索，但找不到任何解决此问题的方法。我需要两个导航栏，一个用于大多数页面，一个用于一组特定的路线

代码

  <BrowserRouter>
        <Header />
        <Switch>
          <Route exact path="/" component={() => <div>home</div>} />
          <Route exact path="/services" component={() => <div>services</div>} />
        </Switch>
  </BrowserRouter>

我需要一些可以渲染除 /services/* 之外的所有路由的东西，因为 /services/* 有不同的

我想过改变 Header 里面的东西，但是会有太多的改变，有不同的组件会更容易。

【问题讨论】：

您可以创建一个高阶组件，例如WithHeader，它使用Header 组件呈现一个组件。请参阅this related question，它是关于在某些路径上渲染页脚的。
stackoverflow.com/questions/57789388/… 这会解决你的问题。

标签： javascript reactjs react-router

【解决方案1】：

您可以在路径中设置条件。我没有对此进行测试，但这种性质的东西可以帮助您组合和分离某些路线。

<BrowserRouter>
        <Header />
        <Switch>
          <Route exact path={"/allComponents" || "/"} component={() => <div>home</div>} />
          <Route exact path="/services" component={() => <div>services</div>} />
        </Switch>
  </BrowserRouter>

【讨论】：

您认为如果我只是将服务导航放在家庭导航上方，因为它会部分匹配，它会起作用吗？
如果您显示所有路线或部分路线，它将按顺序显示。您可以随时尝试告诉我。
它决定使用 Yousaf 发布的 HOC，它运行良好并且是声明性的。谢谢大家的贡献。