I have a question about creating nested routes on the fly. I can generate routes on the fly if it is not nested.
Let's look at the following example -
var routes = [ { name: 'about', path: '/about', handler: './pages/test/index.jsx', // this is a nested routes routes: [ { name: 'me', path: 'me', handler: './pages/test/me' }, { name: 'you', path: 'you', handler: './pages/test/you' } ] } ];
And I am trying to do the following:
var ExtraRoutes = []; _.each(routes, function(route) { ExtraRoutes.push(<Route name={route.name} path={route.path} handler={require(route.handler)} addHandlerKey={true} >); _.each(route.routes, function(route) { ExtraRoutes.push(<Route name={route.name} path={route.path} handler={require(route.handler)} addHandlerKey={true} />) }); // obviously wrong way to do that :) ExtraRoutes.push(</Route>); });
But it looks like my syntax is wrong ... So how to dynamically inject these nested routes into the parent route?
And my ultimate goal is to create the following
<Route name="about" handler={require('./pages/test')}> <Route name="me" handler={require('./pages/test/me')}/> <Route name="you" handler={require('./pages/test/you')}/> </Route>
Any help would be appreciated, thanks.
source share