在 react router v3 中,我已经使用 实现了代码拆分System.import
,现在我想将我的应用程序升级到 react-router-v4,但问题是我无法拆分我的代码。
我的
routes.js
档案
function errorLoading(error) {
throw new Error(`Dynamic page loading failed: ${error}`);
}
function loadRoute(cb) {
return module => cb(null, module.default);
}
module.exports = {
path: '/',
indexRoute: {
getComponent(location, cb) {
System.import('../pages/IndexPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
childRoutes: [{
path: 'notifications',
indexRoute: {
getComponent(location, cb) {
System.import('../pages/NotificationPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
}]
};
然后我只是在我的index.js
文件中导入路由并将它们呈现给 rootNode 就像
ReactDOM.render(
<AppContainer>
<ApolloProvider store={store} client={client}>
<Router
history={browserHistory}
routes={routes}
/>
</ApolloProvider>
</AppContainer>,
rootNode
);