Modulation of routes in the responder router

Question

Is there a way to react the router to modular routes and then just import them and collect them?

So instead:

<Router> <Route path="/" component={App}> <Route path="inbox" component={Inbox}> <Route path="messages/" component={AllMessages} /> <Route path="messages/:id" component={Message} /> </Route> <Route path="calendar" component={Calendar}> <Route path="year" component={Year}> <Route path="month" component={Month}> <Route path="week" component={Week}/> </Route> </Route> </Route> </Route> </Router> 

You can do something like this:

 let InboxRoutes = React.createClass({ render: function(){ return ( <Route path="inbox" component={Inbox}> <Route path="messages/" component={AllMessages} /> <Route path="messages/:id" component={Message} /> </Route> ); } }); <Router> <Route path="/" component={App}> <InboxRoutes/> <CalendarRoutes/> </Route> </Router> 

I get: Warning: Location did not match any routes

Answer 1

One solution is to transfer them to variables:

 let InboxRoutes = ( <Route path="inbox" component={Inbox}> <Route path="messages/" component={AllMessages} /> <Route path="messages/:id" component={Message} /> </Route> ) let CalendarRoutes = (/* define routes like above */) let routes = ( <Router> <Route path="/" component={App}> {InboxRoutes} {CalendarRoutes} </Route> </Router> ) render(routes, document.getElementById("app")) 

Note. Remember to place the parent routes rendering method {this.props.children}

Answer 2

If you want to download routes on demand, you can do this automatically if you use Webpack.

Here's a complete guide: Automatically split code for React Router

To summarize, you should configure the routes using getter functions that will automatically load chunks when necessary.

 import App from 'containers/App'; function errorLoading(err) { console.error('Dynamic page loading failed', err); } function loadRoute(cb) { return (module) => cb(null, module.default); } export default { component: App, childRoutes: [ { path: '/', getComponent(location, cb) { System.import('pages/Home') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'blog', getComponent(location, cb) { System.import('pages/Blog') .then(loadRoute(cb)) .catch(errorLoading); } } ] }; 

Answer 3

Yes, you can, but it's kind of hacky - due to the hacker nature of responding to router v3. See my answer on a similar question:

React-router import routes