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

Question

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 dy

Answer 1

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.

Answer 2

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}/>)