react-routing
Version:
Isomorphic router for React.js applications
87 lines (66 loc) • 3.19 kB
Markdown
//img.shields.io/npm/v/react-routing.svg?style=flat-square)](https://www.npmjs.com/package/react-routing)
[](https://www.npmjs.com/package/react-routing)
[](https://travis-ci.org/kriasoft/react-routing)
[](https://david-dm.org/kriasoft/react-routing)
[](https://gitter.im/kriasoft/react-routing)
For more information visit [www.kriasoft.com/react-routing](http://www.kriasoft.com/react-routing)
```sh
$ npm install react-routing --save
```
```js
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'));
});
```
* [React Starter Kit](https://github.com/kriasoft/react-starter-kit.git)
* [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit.git)
* [React Static Boilerplate](https://github.com/koistya/react-static-boilerplate.git)
* [
* [
* [@koistya](https://www.codementor.io/koistya) on Codementor
The MIT License © Konstantin Tarkus ([@koistya](https://twitter.com/koistya))
[![NPM version](http: