Skip to content

wanap/react-router-lazy-import

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
  )
}

About

📄 react-router lazyload component with TC39 Stage-3 syntax `import()`

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.8%
  • HTML 8.2%