Skip to content
React Router 4 with Server Side Rendering and Async Routes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
example upgrade webpack to get example to work Nov 15, 2019
src add transition ternary Nov 15, 2019
.babelrc update to babel7/react-router 5 May 7, 2019
.gitignore Initial Version Jun 6, 2017
.npmignore Get setup for npm Jun 7, 2017
.prettierrc prettier May 7, 2019
.watchmanconfig update to babel7/react-router 5 May 7, 2019
yarn.lock upgrade webpack to get example to work Nov 15, 2019

Async Routes and transitions for React Router v4

Extend <Route> API to include async rendering and transitions. This is useful to do webpack code-splitting and fetching essential data before rendering.


npm install @simple-contacts/react-router-async-routes --save


yarn add @simple-contacts/react-router-async-routes


To make a asynchronous route, use the async prop. When using the async prop, the component prop becomes a function that evaluates to a promise of the component. The render prop becomes a promise of the render method. The transition prop can include options for 'react-transition-group'.

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Home from "./home";
import Page1 from "./page1";
import Page3 from "./page3";
import { Route } from "react-router-async-routes";

const FadeInTransition = {
  transitionName: "example",
  transitionAppear: false,
  transitionEnterTimeout: 500,
  transitionEnter: true,
  transitionLeave: false

const myErrorHandler = () => {
  console.error("Error loading page...");

const routes = (
    {/* Original API */}
    <Route path="/" component={Home} />

    {/* Route with transition */}
    <Route transition={FadeInTransition} path="/page1" component={Page1} />

    {/* Code Split */}
      component={() => import("./page2")}

    {/* Fetch data before render */}
      render={() => fetch("/api/endpoint1").then(data => <Page3 data={data} />)}

    {/* Code split, data fetch and transition */}
      render={async () => {
        const [Page5, data] = await Promise.all([
        return <Page3 data={data} />;


Static Rendering

The async routes can be preprocessed and resolved using resolveRoutes. Once resolved, React.renderToString can be used.

import express from "express";
import { resolveRoutes } from "react-router-async-routes";
import { renderToString } from "react-dom/server";
import App, { routes } from "./App";

app.use(async function(req, res) {
  const resolvedRoutes = await ResolveRoutes(routes, req.url);

  const html = renderToString(
    <StaticRouter location={req.url} context={{}}>

  res.send(`<body><div id='app'>${html}</div></body>`);


To run the example do a yarn start. You can view the example using the webpack-dev-server via http://localhost:8080. When changes are detected to server or client, the service is restarted automatically (via pm2).

If you want to see the example with bundled files. Run yarn run build-example, then yarn start, and access via http://localhost:8081.


After merging changes...

git fetch
git checkout master
git pull
yarn publish

Select a new version, then push the new commit (i.e. Update your client to use the new version.

You can’t perform that action at this time.