反應路由器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加載。