反应路由器getIndexRoute不会呈现

Question

尝试使用反应路由器实现代码分割。

index.jsx

const routes = { 
    path: '/', 
    component: App, 
    getIndexRoute(partialNextState, callback) { 
     require.ensure([], function (require) { 
      callback(null, { 
       component: require('./home/index.jsx'), 
      }) 
     }) 
    }, 
    childRoutes: [] 
} 

家/ index.jsx

module.exports = { 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('./components/home.jsx')) 
     }) 
    } 
} 

家/组件/ home.jsx包含

module.exports = Home 

没有编译或渲染错误。这个怎么用？使用的WebPack 1.13和反应路由器2.5

Answer 1

一些重构，但这个工程：

index.js

import rootRoute from './routes' 
ReactDOM.render(
    <Router routes={rootRoute} history={browserHistory} onUpdate={onUpdate}/>, 
    document.getElementById('app') 
) 

路线/ index.js

import App from './components/app' 
import Home from './routes/home/components/home' 


const route = { 
    path: '/', 
    component: App, 
    indexRoute: {component: Home}, 
    childRoutes: [ 
     require('./routes/about').default, 
     require('./routes/services').default 
    ] 
} 

export default route 

这意味着，我的应用程序（这窝/ HOLD此后每隔页面加载，以及相关的子路径被加载异步：

路线/约/ index.js

const route = { 
    path: '/about', 
    getComponent(nextState, callback) { 
     require.ensure([], (require) => { 
      callback(null, require('./components/about').default) 
     }) 
    } 
} 

export default route 

所以当我的网址更改为​​关于chunk加载。