How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras

问题

I am currently working on a CMS based project.

For which i am using the universal react redux boilerplate by erikras

I really need suggestions on handling dynamic routing

Lets take a simple scenario form the boilerplate...

In 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'},
];

now, let say on the basis of user role, the properties in json data will change

let say new property: is

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

When react will render the components, how it would know the route link .. as it is not defined in the routes.js

I am not getting the right way to implement it

We need a sidebar made of specific menu content as per the user role .

Let say we are building a reservation system , there can be different user roles like admin, maintenance mode, assistant role .

So different role will have different properties, accordingly we need to generate the menu on the basis it, as the properties will definitely differ as per user role.

Thanks!!

回答1:

It is not clear from your example which component should be rendered for /test url? I suppose it is value of property key, right?

First option

You can do is something like this:

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

It will allow you to render Page component for each url, that starts from / and this component will have page url inside this.props.routeParams.page. It allows you to find needed component inside Page#render:

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

Second option

You can generate Routes dynamically, but I'm not sure if it works (you can check it). You just should replace this part:

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

with

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

回答2:

Third Option:

Follow the react-router example 'huge-apps' for dynamically loading routes.

The project structure provides a logical hierarchy for both the routes and the components. Their approach also uses webpack to load shared bundles with page specific bundled code. The project has a routes folder. In the example, the dynamic portion of the hierarchy is derived from data in the stubs folder which can be changed to use another data source. The approach was effective.

|____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

``` The repo doesn't include this example on the master branch anymore.

来源：https://stackoverflow.com/questions/35764510/how-to-implement-dynamic-routing-in-routes-js-for-generated-menu-items-in-sideba

标签

reactjs

menuitem

react-router