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

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

Страницы пользовательского модуля работают нормально, но когда я перехожу к вложенному маршруту /dashboard, я хочу переключать страницы внутри него, например dashboard/users, dashboard/roles.

Вот код в app.js:

return (
<div>
   <Route exact path="/">
      <HomePage></HomePage>
    </Route>
    <Route  path="/dashboard">
      {isLogged && <Dashboard></Dashboard>}
      {!isLogged && <p>U dont have acces for this path.</p>}
    </Route>
</div>
)

А это код в Dashboard.js:

return <>
<div className="sidebar">
  <MainHeader></MainHeader>
</div>
<div className="content">

  <h1>This is home page od dashboard</h1>
  {/* <Route path="/dashboard/roles">
    <Roles></Roles>
  </Route> */}

  <Route path="/dashboard/users">
    <Users></Users>
  </Route>

  <Route path="/dashboard/roles">
    <Roles></Roles>
  </Route>

</div>

Когда я посещаю /dashboard, я получаю этот скриншот /dashboard, и это нормально, но когда я переключаюсь на /dashboard/roles, я получаю этот скриншот /dashboardofles.

Мой вопрос: почему содержимое маршрута /dashboard/roles отображается с содержимым /dashboard/? Как я могу отображать разные страницы внутри /dashboard, потому что, когда я переключаюсь на какую-то страницу в /dashboard, она всегда сохраняет домашний контент, который в этой ситуации: Это домашняя страница панели инструментов.

Я хочу получить только этот основной текст, например "Роли:" на втором снимке экрана, который я разместил здесь, без этого "Это домашняя страница панели инструментов". Спасибо за все решения, если вы можете помочь :)