（React Router）动态嵌套路由生成

Question

我有一个关于动态生成嵌套路由的问题。如果没有嵌套，我可以动态生成路由。

让我们看看下面的例子 -

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

我尝试做以下事情 -

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

但看起来我的语法不正确......那么如何动态地将这些嵌套路由注入父路由？

我的最终目标是生成以下内容

<Route name="about" handler={require('./pages/test')}>
    <Route name="me" handler={require('./pages/test/me')}/>
    <Route name="you" handler={require('./pages/test/you')}/>
</Route>

任何帮助将不胜感激，谢谢。