react-rainie-router

It has a similar and simple features for react-router,react-rainie-router is a fast, 2kb alternative to react-router.

react-rainie-router provides a component that conditionally renders its children when the URL matches their path. It also automatically wires up elements up to the router.

Features

It is only 2k!, We only use our frequently used functions. Including Route Mathing, Nesting, default routing, Link, dynamic routing...
We can delay or prevent routing navigate by listenBefore before routing jump to another. And listenBefore should return a promise object.
It's no limit to the number of Router component nested other component.
Support coding Spliting by getComponent from Route component.
It does not depend on history, but using html5 history API.

Docs & Help

Getting Started

Install

Using npm:

$ npm install react-rainie-router --save

Import what you need

The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.

import  React from 'react';
import ReactDOM from 'react-dom';
import Router, { Link, listenBefore, Route } from 'react-rainie-router';

Usage Example

/** Stateless app */

function Home({url, title}) {
    return (
        <section className="home">
            <h2>Welcome to my {title}</h2>
            <p>current link: {url}</p>
            <Link href="/account/123">go account</Link>
        </section>
    );
}

function Account({url, matches, name}) {
    return (
        <section className="account">
            <h2>Account: {matches.id}</h2>
            <p>my name is : {name}</p>
            <pre>current link: {url}</pre>
            <Link href="/">go homepage</Link>
        </section>
    );
}

const App = () => (
	<div className="app">
		<Router>
            <Home path="/" title="homepage" />
            <Account path="/account/:id?" name="rainie" />
		</Router>
	</div>
);

ReactDOM.render(<App />, document.getElementById('react-container'));

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.

lanjingling0510 / react-rainie-router