没有JSX的React Router Nest路由

Question

我正在使用webpack 2 /代码拆分，所以我的路由就像这样

import App from './components/App';
import Portal from './components/portal/Portal';

const componentRoutes = {
  component: App,
  path: '/',
  indexRoute: { component: Portal },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('./components/login/Login')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: 'home/:id',
      getComponent(location, cb) {
        System.import('./components/homepage/HomeContainer')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: 'home/:id/assessments',
      getComponent(location, cb) {
        System.import('./components/assessment/AssessmentContainer')
          .then(module => cb(null, module.default));
      } 
    },
    {
      path: 'home/:id/manage_classes',
      getComponent(location, cb) {
        System.import('./components/manageClasses/manageClassesContainer')
          .then(module => cb(null, module.default));
      }
    }
  ]
};

但是我想像这样嵌套我的路线：

import Login from './components/login/Login';
import HomeContainer from  './components/homepage/HomeContainer';
import Unit from './components/homepage/Units'
import AssessmentContainer from './components/assessment/AssessmentContainer';
import ManageClassesContainer from './components/manageClasses/manageClassesContainer';

const componentRoutes = (
  <Route path='/' component={App}>
    <Route path='login' component={Login} />

    <Route path='home/:id' component={HomeContainer}>
      <IndexRoute component={Unit} />
      <Route path='home/:id/assessments' component={AssessmentContainer} />
      <Route path='home/:id/manage_classes' component={ManageClassesContainer} />
    </Route>
  </Route>
);

如何在嵌套路径数组中嵌套路由？当我导航到home/:id时，我不想丢失所有JSX HomeContainer提供的内容，我只想调用use {props.children}来呈现子路由。当你使用代码分割时，你不能使用JSX，这就是我试图重构的原因。