反应路由器getIndexRoute不呈现

特约里莫里

尝试使用React Router实现代码拆分。

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 / components / home.jsx包含

module.exports = Home

没有编译或渲染错误。这是如何运作的？使用Webpack 1.13和React Router 2.5

特约里莫里

进行了一些重构，但这可行：

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

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

路线/关于/index.js

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

export default route

因此，当我的URL更改为/aboutabout块时，将被加载。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。