Awesome Open Source
Awesome Open Source

React-router component lazyload with import()

This is a react-router component lazyload example with TC39 Stage-3 syntax import()
Checkout the file ./src/Router.js

How to start

$ yarn
$ npm start

Checkout http://0.0.0.0:8080/

Build

$ npm run Build
# Then checkout ./build

If you are using docker, to see the build results, you can run:

$ docker-compose up

Then checkout http://localhost/

Lazyload

function lazyLoad (moduleName) {
  return function (location, cb) {
    import(`./components/${moduleName}`)
      .then(module => cb(null, module.default))
      .catch(err => console.error(err))
  }
}

export default function Root () {
  return (
    <Router history={hashHistory}>
      <Route path='/' component={App}>
        <Route path='/home' getComponent={lazyLoad('Home')} />
        <Route path='/posts' getComponent={lazyLoad('Posts')}>
          <Route path=':id' getComponent={lazyLoad('Article')} />
        </Route>
        <Route path='/about' getComponent={lazyLoad('About')} />
      </Route>
    </Router>
  )
}
Alternatives To React Router Lazy Import
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,074,350
Reactjs (164,532
Router (13,777
Syntax (11,092
Lazyload (1,450
Tc39 (100