Блог

Главная - Вопросы по программированию - Динамическая вложенная маршрутизация

Динамическая вложенная маршрутизация

#reactjs #react-router-dom

#reactjs #реагировать-маршрутизатор-dom

Вопрос:

У меня проблема с моей панелью мониторинга, которая использует доступ нескольких пользователей. В пути «/» есть стандартная и общая панель мониторинга; в то время как в другой панели мониторинга у меня есть пользовательские пользователи. Я использую Reactjs и эту версию react-router-dom «react-router-dom»: «^ 5.1.2»:

 <Router basename="/test">
  <Switch>
    <Route  path="/" component={Dashboard} />
    <Route  path="/:username" component={Dashboard} />
  </Switch>
</Router>

В моих компонентах панели мониторинга у меня есть другой маршрутизатор:

 let { url } = useRouteMatch();

<Switch>
  <Route exact path={`${url}`} component={Library} />  
  <Route path={`${url}/whish`} component={Wishlist} />                  
</Switch>

Это не работает. У меня есть следующие сценарии:

случай A:

/test Общая панель мониторинга -> Компонент библиотеки /test / whish Общий список желаний -> Компонент списка желаний

случай B

/ Библиотека приборной панели Джона Джона /john/ Список пожеланий приборной панели Джона

/ Панель инструментов Сэма Сэма / Sam/whish Список пожеланий Сэма

Комментарии:

1. Можете ли вы показать нам пример в codesandbox или аналогичный? Не видя вашего Dashboard компонента, трудно понять, как это должно работать.

2. @technicallynick codesandbox.io/s/practical-galileo-d1ibm

Ответ №1:

В вашей изолированной среде было несколько проблем.

  1. У вас отсутствовал импорт
  2. Ваш Dashboard компонент использовался useRoutMatch для определения вложенных путей. Я бы рекомендовал проверить наличие имени пользователя и изменить ваш URL-адрес на основе этого.
  3. Ваша ссылка «La mia Libreria» просто вела обратно к «/», который является базовым URL-адресом для страницы. Вам либо нужно уже загрузить это содержимое, либо отправить его на другой URL.
  4. У вас App.js было два маршрута: один для имени пользователя и один без него. Это не удается, потому что даже с именем пользователя ваш первый маршрут перехватывается. Вы можете изменить их порядок, чтобы первым был маршрут имени пользователя, но лучшим решением является использование условных параметров. Вы можете увидеть мое решение в функциональной изолированной среде ниже.

https://codesandbox.io/s/falling-fire-4xklm?file=/src/App.js