React Router Nest Routes Without JSX

I am using webpack 2 / code splitting so I have routes like this

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

      

        
        
        
      

    

But I want to nest my routes like this:

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

      

        
        
        
      

    

How do you have nested routes inside an array of nested routes? When I go to home/:id

, I don't want to lose all JSX HomeContainer

, and I just want to call {props.children}

to display the child routes. When you use code splitting, you cannot use JSX, so I am trying to refactor.