Как реализовать динамическую маршрутизацию в route.js для сгенерированных пунктов меню на боковой панели в универсальной схеме редукции для сокращения от erikras

В настоящее время я работаю над проектом на основе CMS.

Для чего я использую универсальный реактивный редукционный шаблон erikras

Мне действительно нужны предложения по обработке динамической маршрутизации

Давайте рассмотрим простой сценарий с шаблоном...

В routes.js

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

data.js

export const data = [
  {id: 1, property: 'Dashboard', link: '/'},
  {id: 2, property: 'Login', link: '/login'},
  {id: 3, property: 'About Us', link: '/About'},
];

теперь, скажем, на основе роли пользователя, свойства в json-данных будут меняться

скажем, новое свойство:

{id: 4, property: 'test page', link: '/test'}

Когда реакция будет отображать компоненты, как она будет знать ссылку маршрута.. поскольку она не определена в route.js

Я не получаю правильный способ его реализации

Нам нужна боковая панель, состоящая из определенного содержимого меню в соответствии с ролью пользователя.

Скажем, мы строим систему бронирования, могут быть разные роли пользователя, такие как admin, режим обслуживания, роль помощника .

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

Спасибо!!

Ответы

Ответ 1

Из вашего примера неясно, какой компонент должен отображаться для /test url? Я полагаю, что это значение ключа property, правильно?

Первая опция

Вы можете сделать что-то вроде этого:

<Route path="/:page" component={Page}/>

Это позволит вам отображать компонент Page для каждого URL-адреса, который начинается с /, и этот компонент будет иметь URL-адрес страницы внутри this.props.routeParams.page. Он позволяет найти необходимый компонент внутри Page#render:

render() {
  const url = this.props.routeParams.page;
  const PageComponent = data.find(page => page.link === url).property;
  render <PageComponent />;
}

Вторая опция

Вы можете генерировать маршруты динамически, но я не уверен, что он работает (вы можете проверить его). Вы просто должны заменить эту часть:

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

с

 data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)

Ответ 2

Третий вариант:

Следуйте за примером-маршрутизатором "огромные приложения" для динамической загрузки маршрутов.

Структура проекта обеспечивает логическую иерархию как для маршрутов, так и для компонентов. В их подходе также используется webpack для загрузки общих пакетов со связанным с страницей кодом. В проекте есть папка маршрутов. В этом примере динамическая часть иерархии получена из данных в папке заглушек, которую можно изменить, чтобы использовать другой источник данных. Этот подход был эффективным.

|____Calendar
| |____components
| | |____Calendar.js
| |____index.js
|____Course
| |____components
| | |____Course.js
| | |____Dashboard.js
| | |____Nav.js
| |____index.js
| |____routes
| | |____Announcements
| | | |____components
| | | | |____Announcements.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Announcement
| | | | | |____components
| | | | | | |____Announcement.js
| | | | | |____index.js
| | |____Assignments
| | | |____components
| | | | |____Assignments.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Assignment
| | | | | |____components
| | | | | | |____Assignment.js
| | | | | |____index.js
| | |____Grades
| | | |____components
| | | | |____Grades.js
| | | |____index.js
|____Grades
| |____components
| | |____Grades.js
| |____index.js
|____Messages
| |____components
| | |____Messages.js
| |____index.js
|____Profile
| |____components
| | |____Profile.js
| |____index.js

`` ` Репо больше не включает этот пример в мастер-ветку.