React-Router: всегда отображать заголовок, но не на целевой странице

Мое текущее дерево маршрутизаторов выглядит так:

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

Я хочу, чтобы <Header /> отображался всегда при рендеринге компонентов <Component1 /> и <Component2 />, но не когда пользователь находится на целевой странице (<Landing />).

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 167
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

Другие вопросы по теме