反应路由器 getIndexRoute 不渲染答案

【问题标题】：React router getIndexRoute does not render反应路由器 getIndexRoute 不渲染
【发布时间】：2016-06-30 12:42:18
【问题描述】：

尝试使用 react 路由器实现代码拆分。

index.jsx

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

home/index.jsx

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

home/components/home.jsx 包含

module.exports = Home

没有编译或渲染错误。这是如何运作的？使用 webpack 1.13 和 react router 2.5

【问题讨论】：

标签： reactjs webpack react-router

【解决方案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

这意味着我的应用程序（其后嵌套/保存的每个页面都被加载，并且相关的子路由被异步加载：

routes/about/index.js

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

export default route

所以当我的 url 更改为 /about 时，加载了 about 块。

【讨论】：