Показать / скрыть компонент навигации для определенных маршрутов в реакции

Question

У меня есть основной компонент уровня приложения, как показано ниже

        <div className="app-container">
            <AppHeader />
            <div className="app-content">
                <Routes />
            </div>
            <Notification />
        </div>

Я хочу, чтобы <AppHeader /> отображался (или был скрыт) для определенных маршрутов.Как это можно сделать чистым способом в React?Я использую React Router

Answer 1

Один из способов сделать это - создать новый Switch и ничего не отображать для тех путей, в которых вы не хотите показывать свой заголовок, и отображать заголовок для всех остальных путей.

Пример

<Switch>
  <Route path="/login" />
  <Route path="/about" />
  <Route path="/*" component={AppHeader} />
</Switch>