React Router Legacy

This is a maintained version of react-router v2

React Router is a complete routing library for React.

React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

Docs & Help

• Guides and API docs
• Troubleshooting guide
• Changelog

Browser Support

We support all browsers and environments where React runs.

Installation

Using npm:

$ npm install --save react-router-two-legacy

Then with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

// using an ES6 transpiler, like babel
import { Router, Route, Link } from 'react-router-two-legacy'

// not using an ES6 transpiler
var Router = require('react-router-two-legacy').Router
var Route = require('react-router-two-legacy').Route
var Link = require('react-router-two-legacy').Link

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-router-two-legacy/umd/ReactRouter.min.js"></script>

You can find the library on window.ReactRouter.

What's it look like?

import React from 'react'
import createReactClass from 'create-react-class'
import { render } from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router-two-legacy'

const App = createReactClass({/*...*/})
const About = createReactClass({/*...*/})
const NoMatch = createReactClass({/*...*/})

const Users = createReactClass({
  render() {
    return (
      <div>
        <h1>Users</h1>
        <div className="master">
          <ul>
            {/* use Link to route around the app */}
            {this.state.users.map(user => (
              <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
            ))}
          </ul>
        </div>
        <div className="detail">
          {this.props.children}
        </div>
      </div>
    )
  }
})

const User = createReactClass({
  componentDidMount() {
    this.setState({
      // route components are rendered with useful information, like URL params
      user: findUserById(this.props.params.userId)
    })
  },

  render() {
    return (
      <div>
        <h2>{this.state.user.name}</h2>
        {/* etc. */}
      </div>
    )
  }
})

// Declarative route configuration (could also load this config lazily
// instead, all you really need is a single root route, you don't need to
// colocate the entire config).
render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.getElementById('root'))

See more in the Introduction, Guides, and Examples.

Versioning and Stability

We want React Router to be a stable dependency that’s easy to keep current. We take the same approach to versioning as React.js itself: React Versioning Scheme.

Thanks

Thanks to our sponsors for supporting the development of React Router.

React Router was initially inspired by Ember's fantastic router. Many thanks to the Ember team.