webpack - React Router Webpack 2 代码拆分 - 使用 getChildRoutes()

Question

当我导航到时，/home我有一个显示主页图标、关于、设置等的导航栏。显示此导航栏的组件位于HomeContainer. 根据 url，我想加载HomeContainer的路线。我正在使用 wepback 2，代码拆分，反应路由器 3。

这是我的路线文件

import React from 'react';
import { Router, hashHistory } from 'react-router';
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',
      getComponent(location, cb) {
        System.import('./components/homepage/HomeContainer')
          .then(module => cb(null, module.default));
      },
      getIndexRoute(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, {
            component: require('./components/homepage/Home'),
          })
        })
      },
      getChildRoutes(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, [
            require('./components/homepage/About').default
          ])
        })
      }
    }
  ]
};

const Routes = () => {
  return <Router history={hashHistory} routes={componentRoutes} />
};

export default Routes;

问题是，如何让about组件渲染？我希望能够导航到/home/about并加载它，作为HomeContainer.

Answer 1

getChildRoutes(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, [{
               path: 'about',
               component: require('./components/homepage/About').default
            }            
          ])
        })
}]