reactjs - React-Router:始终显示标题但不显示在着陆页中

Question

我当前的路由器树如下所示:

  <Route exact path="/" component={Landing} />
  <Route component={Header} />§
  <Route path="/component1" component={Component1} />
  <Route path="/component2" component={Component2} />
  ...

我想要 <Header />渲染组件时始终显示<Component1 />和 <Component2 />但当用户位于登录页面 ( <Landing /> ) 时则不会。

然而，对于上面的 react 路由器树，<Header />一直显示。

Answer 1

您可以使用 react-router-dom 中的 Switch 并像这样配置您的路由

<Switch>
    <Route exact path="/" component={Landing} />
    <Route component={Header} />
</Switch>
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />

在上述情况下，如果 Landing 路由匹配，则不呈现 Header，否则呈现 Header