react-routing

Isomorphic router for React.js applications

For more information visit www.kriasoft.com/react-routing

How to Install

$ npm install react-routing --save

Quick Start

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-routing/lib/Router';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';

const router = new Router(on => {

  on('*', async (state, next) => {
    const Layout = require('./components/Layout');
    const component = await next();
    if (component === undefined) {
      return undefined;
    }
    return <Layout context={state.context}>{component}</Layout>;
  });

  on('/', () => {
    const HomePage = require('./components/HomePage');
    return <HomePage />;
  });

  on('/products', async () => {
    const [data, require] = await Promise.all([
      http.get('/api/products'),
      new Promise(resolve => require.ensure(['./components/ProductsPage'], resolve))
    ]);
    const ProductsPage = require('./components/ProductsPage');
    return data ? <ProductsPage products={data} /> : undefined;
  });

  on('/products/:name', async (state) => {
    const [data, require] = await Promise.all([
      http.get(`/api/products/${state.params.name}`),
      new Promise(resolve => require.ensure(['./components/ProductInfoPage'], resolve))
    ]);
    const ProductInfoPage = require('./components/ProductInfoPage');
    return data ? <ProductInfoPage product={data} /> : undefined;
  });

  on('error', (state, error) => state.statusCode === 404 ?
    <Layout context={state.context} error={error}><NotFoundPage /></Layout> :
    <Layout context={state.context} error={error}><ErrorPage /></Layout>
  );

});

await router.dispatch({ path: '/products/example' }, (state, component) => {
  ReactDOM.render(component, document.getElementById('app'));
});

Related Projects

• React Starter Kit
• Babel Starter Kit
• React Static Boilerplate

Support

• #react-routing on Gitter
• #react-starter-kit on Gitter
• @koistya on Codementor

License

The MIT License © Konstantin Tarkus (@koistya)