Moved to router5 repository

react-router5

Higher-order components and components for React when using router5.

Installation

npm install --save react-router5

Examples

• Example project
• Demo

Requirements

• react >= 0.14.0
• router5 >= 2.0.0

What does this package export?

• RouterProvider: component
• Link: component
• routeNode: higher-order component
• BaseLink: component
• withRoute: higher-order component

How it works

RouterProvider

It will add your router instance in context.

import React from 'react';
import ReactDOM from 'react-dom';
import { RouterProvider } from 'react-router5';
import App from './App';
import router from './router';

ReactDOM.render(
    <RouterProvider router={ router }><App /></RouterProvider>,
    document.getElementById('app')
);

routeNode HOC

routeNode(nodeName): higher-order component to wrap a route node component.

• Specify your component node name ('' if root node)

Note: your router needs to use listenersPlugin from router5.

import React from 'react';
import { routeNode } from 'react-router5';
import { UserView, UserList, NotFound } from './components';

function Users(props) {
    const { previousRoute, route } = props;

    switch (route.name) {
        case 'users.list':
            return <UserList/>;
        case 'users.view':
            return <UserView/>;
        default:
            return <NotFound/>;
    };
}

export default routeNode('users')(Users);

Link component

import React from 'react';
import { Link } from 'react-router5';

function Menu(props) {
    return (
        <nav>
            <Link routeName='home' routeOptions={{reload: true}}>Home</Link>

            <Link routeName='about' routeOptions={{reload: true}}>About</Link>
        </nav>
    );
}

export default Menu;

The Link component is BaseLink and withRoute composed together

BaseLink component

Same as Link, except it won't mark it-self dirty (and re-render) on a route change. BaseLink needs to be passed your router instance.

withRoute HOC

Will create a new component, injecting your router instance (from context) and the current route to the wrapped component. Any route change will trigger a re-render.

Contributing

Please read contributing guidelines on router5 repository.