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.
The next version of React Router (v4) is in beta now.
- Tutorial – do this first!
- Guides and API docs (v2, v3)
- Troubleshooting guide
- Changelog
- Stack Overflow
- CodePen boilerplate for bug reports
Older Versions:
- 0.13.x - docs / guides / code / upgrade guide
- 1.0.x - docs / code / upgrade guide
For questions and support, please visit our channel on Reactiflux or Stack Overflow.
We support all browsers and environments where React runs.
Using npm:
$ npm install --save react-router
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'
// not using an ES6 transpiler
var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').LinkThe UMD build is also available on unpkg:
<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>You can find the library on window.ReactRouter.
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'
const App = React.createClass({/*...*/})
const About = React.createClass({/*...*/})
const NoMatch = React.createClass({/*...*/})
const Users = React.createClass({
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 = React.createClass({
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.
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 to our sponsors for supporting the development of React Router.
React Router was initially inspired by Ember' 6082 s fantastic router. Many thanks to the Ember team.
Also, thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.