Как сделать отдульную навигацию для пользователей и админ-панели?

Question

[embiid]

Я работаю над веб-приложением React для маршрутизации разных страниц, используя React Router.
Всего 2 основных родительских маршрута, а именно (Клиент и Администратор). Поэтому, когда пользователь нажимает, например: localhost: 3000, он должен по умолчанию перейти на домашнюю страницу (Компонент клиента) и localhost: 3000 / путь администратора на (Страница администратора).

Для user - все ок, все работает.

function App() {
  return (
    <div className="App">
      <BrowserRouter>

          <Switch>
           <Route path='/' component={ UserPage } />
           <Route path='/admin' component={ AdminPage } />
          </Switch>

      </BrowserRouter>
    </div>
  );
}

<div className="App">
      <BrowserRouter>

        <Header />

          <Switch>
            <Route path="/" component={ Home } exact />
            <Route path="/catalog" component={ CatalogPage } exact />
            <Route path="/products" component={ ProductPage } exact />
            <Route path="/products/:id" component={ ItemPage } exact />

            <Route path="/login" component={ Login } exact />
            <Route path="/registration" component={ Registration } exact />
          </Switch>

        <Footer />

      </BrowserRouter>
    </div>

Но, теперь когда хочу сделать маршутизацию для админа, у меня отображает пользовательский интерфейс...:

function AdminPage() {
  return (
    <div className="App">
      <BrowserRouter>
          <Switch>
            <Route path="/" component={ Home } exact/>
          </Switch>
      </BrowserRouter>
    </div>
  );
}