Question

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

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并对路由器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

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

路由/约/ index.js

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

export default route

因此，当我的网址更改为/about时，会加载关于大块的内容。

React路由器getIndexRoute不呈现

1 个答案: