I try to figure out how code splitting work with webpack2.x
and react-router-dom
.
"react-router-dom": "^4.0.0"
But I read the doc and did not find a way to use like this:
getComponent
still work or not?
I find the react-router-dom
doc just give you some example, no explain.
I saw react-router
is v4.0.0-beta.8
, Maybe I should use react-router-dom
later?
module.exports = {
path: 'home',
getComponent(nextState, cb) {
import('./main').then(component => {
cb(null, component);
}).catch(err => {
console.log('Failed to load "home" component', err);
});
}
};
It looks like .getComponent()
is no longer available. I think react-router hands off this responsibility to the developer to create his own async components. There is a great guide in the react-router-dom docs about handling code splitting using webpack2 and bundle-loader:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md
And here is awesome quick code splitting example with React Router v4: https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194
Hope that helps!