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

avatar
Notch
8 августа 2021 в 17:18
196
1
1

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

Страницы пользовательского модуля работают нормально, но когда я перехожу к вложенному маршруту /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, она всегда сохраняет домашний контент, который в этой ситуации: Это домашняя страница панели инструментов.

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

Источник
Golamrabbi Azad
8 августа 2021 в 18:08
0

вы визуализируете панель инструментов, а также другие в одном компоненте и перемещаетесь по ним, как показывает ваш код. поэтому держите их отдельными компонентами друг от друга и направляйте их в корневой файл, который может быть индексным файлом или файлом приложения. Теперь перейдите на страницу пользователя или страницу ролей, когда пользователь вошел в систему, и переместите их на доступный маршрут, используя хук useHistory. это логика.

Ответы (1)

avatar
Train Hartent
9 августа 2021 в 00:32
0

Я понимаю, что у вас проблема с тем, что содержимое информационной панели отображается в информационной панели/ролях. Прежде всего, вы написали в верхней части информационной панели Это домашняя страница информационной панели, и это проблема, которую вы делаете h1 глобальным который отображается с каждым маршрутом в файле информационной панели, который вы должны включить в этот h1 в

    <Route path="/dashboard">
    <h1>This is home page od dashboard<h1>
  </Route>

Надеюсь, я помог вам, если у вас есть какие-либо вопросы, не стесняйтесь спрашивать меня