Добавить компонент ко всем реакциям, кроме одного

Question

Я хочу применить заголовок ко всем страницам, кроме дома. Каков был бы лучший подход для этого? Я не хочу копировать заголовок для каждой новой страницы.

<Switch>
  <Route path="/">
    <Home />
  </Route>
  <Route path="/about">
    <Header />
    <About />
  </Route>
  <Route path="/users">
    <Header />
    <Users />
  </Route>         
</Switch>

Answer 1

Если вы используете реагирующий маршрутизатор, вы можете получить доступ к свойству location.pathname props, а затем отображать его только для определенных путей.

<div>
 {props.location.pathname !== '/' && <Header />}
 <Switch> 
   <Route path="/">
     <Home />
   </Route>
   <Route path="/about">
     <About />
   </Route>
   <Route path="/users">
     <Users />
   </Route>         
 </Switch>
</div>

Answer 2

Я придумал другой подход без необходимости отслеживать location, как в другом посте, - надеюсь, он может кому-то помочь:

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route render={() =>
      <>
        <Header /> // --> header component will be present whenever a route is not matching the '/' route
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
        </Switch>
      </>
    }} />
  </Switch>
</Router>