Два раздельных маршрута в роутере реакции

Question

У меня есть приложение, и я хочу добавить маршруты администратора. Проблема в том, что мой заголовок и нижний колонтитул отображаются на каждом маршруте, поэтому, когда я пытаюсь получить доступ к админ-панели, они также отображаются. Как я могу разделить 2 разных маршрута для 2 разных приложений (не совсем, но я надеюсь, вы поймете)

Вот так выглядит мой роутер:

  <Router>
    <Container>
    <Header/> // it is intended
      <Switch>
        <Route exact path='/' component={ Home } />
        <Route path='/news/:category/:id/:title' component={ SingleArticle } />
        <Route path='/news' component={ Home } />
        <Route path='/live' component={ Live } />
        <Route path='/admin' component={ AdminPanel } /> //here I want all my admin routes which generates its own header and footer
        <Route path='*' component={ NotFound } />
      </Switch>
    <Footer /> // it is intended
    </Container>
  </Router>

Answer 1

Вы можете иметь разные маршруты для администратора и не администратора. Вы можете сделать следующее:

if(admin) {
  return (
   <Router>
    <Header>
     // ... routes here
    </Header>
   </Router>
  )
} else {
  return (
   <Router>
    <AdminHeader />
     // ... routes
   </Router>
  )
}