Question

当我导航到/home时，我有一个导航栏，显示主页图标，关于，设置等。显示此导航栏的组件位于HomeContainer内。根据网址，我想加载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
            }            
          ])
        })
}]

React Router Webpack 2 Code Splitting - 使用getChildRoutes（）

1 个答案: