Skip to content
react router v4 async routing
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src Use PropTypes from dedicated package / support React 16+ Nov 7, 2017
.babelrc Fix missing react imports Aug 8, 2017
.gitignore First release with example Mar 4, 2017
.npmignore
README.md
package-lock.json
package.json
yarn.lock Support beta 8 Mar 9, 2017

README.md

Async Routing

TODO:

  • server render
  • make route config optional

React router v4 is awesome, but one thing is missing! Async routes. There's a couple components out there but they all have the same problem, on route change, the component will return null, then load the page. This makes for an annoying user experience. This package will wait for the bundle before a route change, and also allow you to preload pages!

You must be using webpack 2 along with syntax-dynamic-import to use this package!

Install

npm install react-router-async-routing

Setup

Create a routes file, with the pathname and path to your component files

export default [
  {
    path: '/employers',
    dataPath: 'employers',
  },
  {
    path: '/test/:name',
    dataPath: 'test/index',
  },
]

Create a router file that will export Preload, Link, and Route components for you to use in place of the built in components in v4:

import routes from './routes';
import AsyncSetup from 'react-router-async-routing'

const { Route, Link, Preload } = AsyncSetup(routes, path => import(`./views/${path}.js`));

export { Link, Route, Preload };

The first argument is your routes array, the second is a function that takes a path (the dataPath in the routes file) and load the component according to its location.

Now, render your routes using the components from the file you just created!

import { Route } from './router'

....
{routes.map(route => <Route key={route.path} {...route} />)}

Now, you can link to any page like you're used to, just import { Link } from './router'!

Preloading routes

Note: If you use a service worker, this isn't really needed. Except on older browsers.

If a user is on the homepage, and you'd like to load the about page ahead of time, just render this inside of your homepage:

export const Home = (
  <div>
    <h2>Home</h2>
    <Preload path="/about" />
  </div>  
)

The route will be loaded in the background :)

Custom loading

If you need to do more than just async load a route, you can make your own loader by importing components directly:

import LinkBuilder from 'react-router-async-routing/link'

const CustomLink = LinkBuilder(
  async ({ path }) => await somePromise()
)

The function passed will be awaited on any time a link is clicked.

You can’t perform that action at this time.