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(<Landing />).

Однако, с указанным выше деревом реагирующего маршрутизатора всегда отображается <Header />.

Answer 1

Вы можете использовать Switch из react-router-dom и настроить свои маршруты как

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

. В приведенном выше случае, если Landing маршрут соответствует, Header не отображается, в противном случаеHeader отображается