У меня есть приложение, основанное на статье http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/. Я добавил некоторые ребенок маршруты и теперь моя конфигурация маршрутизатора как таковые:Webpack 2 + React - вложенные маршруты при разрыве кода с System.import
function errorLoading(err) {
console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
console.log('load route called');
return (module) => cb(null, module.default);
}
const obj = {
component: App,
childRoutes: [
{
path: '/',
getComponent(location, cb) {
System.import('pages/Home')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '/gsgs',
getComponent(location, cb) {
System.import('pages/Gsgs')
.then(loadRoute(cb))
.catch(errorLoading);
},
childRoutes: [
{
path: 'go',
getComponent(location, cb) {
System.import('pages/Gsgs/Home.js')
.then(loadRoute(cb))
.catch(errorLoading);
},
}
]
},
{
path: '/about',
getComponent(location, cb) {
System.import('pages/About')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
]
};
/индекс,/о и/gsgs маршрутах запуск динамического кода загрузки просто отлично. Но/gsgs/go запускает a 404 с
bundle.js:2 Dynamic page loading failed Error: Loading chunk 0 failed.(…)
Что я делаю неправильно? Im, использующий
"webpack": "^2.1.0-beta.4", "webpack-dev-server": "^2.0.0-beta"
не уверен, почему вы получаете сообщение об ошибке, но просто обратите внимание, что вы можете использовать элемент JSX для настройки маршрутов вместо объекта, который становится неуправляемо большим. –
Да, я знаю элемент jsx для маршрутизатора, я считаю, что обозначение объектов чище и легче читать – nuway