React-Router Cheat sheet

Stéphane Derosiaux

2 min readFeb 11, 2016

Because my memory sucks.
– Me

import { … } from ‘react-router’; // 2.0

Import only what you need

eg: import Link from ‘react-router/lib/Link’;

Router

The root piece of the application. <Router [route={routes}]>
Routes can be described as its JSX children, or, better, in a distinct file (needed for SSR) and use the prop route of the Router.

hashHistory

Singleton. <Router history={hashHistory}>
You should use it only when you’re playing with RR. Hashes are ugly. Moreover, RR adds a random seed in the URL to maintain some state if you hit browser’s previous/next.

browserHistory

Singleton. <Router history={browserHistory}>
The history to use, no question asked.

browserHistory.push(‘/route/not/handled/by/router’)
Better, in a component: this.context.router.push
The server must be configured to always send index.html (without SSR, it has no clue how to render /page/foo/bar/2, only the Router knows).

createMemoryHistory

Not a singleton. Must be instanciate manually.
Used when you don’t have an address bar. Such as in your tests.

Route

Child of <Router> or another <Route>.

<Router>
  <Route path="/page/:id" component={MyPage}>
    <Route path="authors" component={MyPageAuthors} />
  </Route>
  <Route path="*" component={Page404} />
</Router>

The component of a parent route must use {this.props.children} to render the child content (here MyPage should handle that).
The routes should be described in a single js file with a export default. It is necessary for SSR.

// routes.js
export default <Route path="/" component={App}>...</Route>

The routes can use webpack’s require.ensure() to dynamically load nested routes and resources in the browser : https://github.com/rackt/react-router/blob/latest/docs/guides/DynamicRouting.md
OnEnter={({location, params, routes}, replace, error) => {…}}
OnLeave={() => {…}}
A routed component can know if it’s being cast away :

componentDidMount() {
  this.context.router.setRouteLeaveHook(this.props.route,
    (nextLocation) => false); // you will never leave
}

IndexRoute

Child of <Route> : <IndexRoute component={Home} />
It defaults which component to display as child (when the other children do not match yet).

Redirect

You want to redirect the user somewhere (such as from a deprecated route).
<Redirect from=”/old” to=”/new” />

Link

Replaces <a>. <Link [activeStyle|activeClass]> to define the active style.

IndexLink

Equivalent of <Link onlyActiveOnIndex>. When you don’t want this Link to be set active if one of its child is.
Useful for “/” : <IndexLink to=“/”> because every routes is inside.

RouterContext

Higher Order Component used to wrap the component declared in <Route>.
Hidden in front-end, used in SSR.

match

Equivalent of the <Router> for SSR. When serving a query :

import { renderToString } from 'react-dom/server';// routes is your array of routes below <Router>
// location is the full url of the request
match({ routes, location }, (err, redirectLocation, props) => {
  res.send(renderToString(<RouterContext {...props} />))
});

Using redux also ? react-redux-router.
Want smooth transition ? React’s TransitionGroup.
Or the new react-router-transition that uses the nice react-motion

If you’re not me, come say hi on twitter : https://twitter.com/chtefid