Async component loaded based webpack 3 for react-router 4.
It is recommended to run webpack on node 6.x or higher.
Install the pkg with npm:
npm install async-react-component --save or yarn
yarn add async-react-component or bower
bower install async-react-component For react-router 4:
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import {getAsyncComponent} from 'async-react-component'; // code splitting in webpack 3: https://webpack.js.org/guides/code-splitting/#dynamic-imports const App = () => import(/* webpackChunkName: "main" */ '../general/app/index'); const Info = () => import(/* webpackChunkName: "info" */ '@components/info/index'); const RootApp = () => { return ( <Router> <Switch> <Route exact path='/' component={getAsyncComponent(App)}></Route> <Route path='/info' component={getAsyncComponent(Info)}></Route> <Route render={() => <div>404 not found</div>}></Route> </Switch> </Router> ); }; ReactDOM.render( RootApp, document.getElementById('app') ); MIT