module.exports = { path: 'baidu', getChildRoutes(partialNextState, cb) { require.ensure([], (require) => { cb(null, [ require('./routes/result'), require('./routes/frequency') ]) }) }, getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/BaiduPage')) }, 'BaiduPage') } }
/baidu/routes/frequency/index.js
module.exports = { path: 'frequency', getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/BaiduFrequencyPage')) }, 'BaiduFrequencyPage') } }
举这几个例子应该就差不多了，其他都是一样的，稍微有点特别的是 redirect。
设置 Redirect
之前我们在根路由下是这么设置重定向的：
<Router history={browserHistory}> <Route path="https://www.jb51.net/" component={App}> {/* home */} <IndexRoute component={HomePage} /> <Route path="/baidu" component={BaiduPage}> <Route path="result" component={BaiduResultPage} /> <Route path="frequency" component={BaiduFrequencyPage} /> </Route> <Route path='/404' component={NotFoundPage} /> {/* 如果都不匹配，重定向到 404 */} <Redirect from='*' to='/404' /> </Route> </Router>
当改写之后，我们需要把这个重定向的路由单独拆出来，也就是 * 这个路由，我们上面已经为他创建了一个 redirect 目录。这里使用到 onEnter 方法，然后在这个方法里改变路由状态，调到另外的路由，实现 redirect ：
/redirect/index.js
module.exports = { path: '*', onEnter: (_, replaceState) => replaceState(null, "/404") }
The root route must render a single element
跟着官方示例和上面码出来之后，可能页面并没有渲染出来，而是报 The root route must render a single element 这个异常，这是因为 module.exports 和 ES6 里的 export default 有区别。
如果你是使用 es6 的写法，也就是你的组件都是通过 export default 导出的，那么在 getComponent 方法里面需要加入 .default。
getComponent(nextState, cb) { require.ensure([], (require) => { // 在后面加 .default cb(null, require('components/layer/ReportPage')).default }, 'ReportPage') }
如果你是使用 CommonJS 的写法，也就是通过 module.exports 导出的，那就无须加 .default 了。