React Router Async

IMPORTANT NOTE! STATUS FOR THIS PROJECT IS EXPERIMENTAL AND THINGS CAN CHANGE, IT'S NOT READY FOR PRODUCTION

React Router Async is ultimate routing solution for your React applications, especially it's good in universal applications.

Installation

yarn add react-router-async
Bash

Usage

On client:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-async';
import { routes, hooks } from './common';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();
const mountNode = document.getElementById('app');

BrowserRouter.init({ path: history.location.pathname, routes, hooks, history }).then(({ Router, routerProps, Component, componentProps, callback }) => {
    ReactDOM.render(<Router {...routerProps} />, mountNode, callback);
}).catch(error => console.log(error));
JavaScript

On server (for example as express middleware):

export default function (req, res, next) {
    ServerRouter.init({ path: req.path, routes, hooks }).then(({ Router, routerProps, status, redirect }) => {
        if (redirect) {
            res.redirect(status, redirect);
        } else {
            const html = ReactDOM.renderToStaticMarkup(HtmlComponent({
                markup: ReactDOM.renderToString(<Router {...routerProps} />),
                assets: assets
            }));
            res.status(status).send('<!DOCTYPE html>' + html);
        }
    }).catch(error => {
        if (error.name === 'RouterError') {
            res.status(error.code).send(error.message);
        } else {
            res.status(500).send('Internal error');
        }
    });
}
JavaScript

GitHub

router-async/react-router-async

98

<⍦/> React Components on top of Core — Read More

Latest commit to the master branch on 3-4-2019
Download as zip