A complete routing library for React. https://rackt.github.io/react-router
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
Browser Support
We support all browsers and environments where React runs.
Installation
npm + webpack/browserify
npm install react-router
Then with a module bundler or webpack, use as you would anything else:
// using an ES6 transpiler
import { Router, Route, Link } from 'react-router';
// not using an ES6 transpiler
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
There's also a lib/umd
folder containing a UMD version.
bower + who knows what
bower install react-router
Find the UMD/global build in lib/umd
, and the library on
window.ReactRouter
. Best of luck to you. :)
CDN
Available on cdnjs here.
What's it look like?
import { Router, Route } from 'react-router';
import BrowserHistory from 'react-router/lib/BrowserHistory';
var App = React.createClass({/*...*/});
var About = React.createClass({/*...*/});
// etc.
var 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><Link to={`/users/${users.id}`}>{user.name}</Link></li>
))}
</ul>
</div>
<div className="detail">
{this.props.children}
</div>
</div>
);
}
});
var 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).
React.render((
<Router history={new BrowserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users} indexComponent={RecentUsers}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body);
See more in the [overview guide](/doc/00 Guides/0 Overview.md) and [Advanced Usage](/doc/00 Guides/Advanced Usage.md)
Contributing
Please see CONTRIBUTING
Thanks, Ember
React Router was initially inspired by Ember's fantastic Router. Many thanks to the Ember team.