React-router
A cheatsheet by @rstacruz|Refreshed 7 months ago.Refresh|View source on Github

{% raw %}

Basic

Basic

import { default as Router, Route } from 'react-router'

const routes = (
  <Route>
    <Route path='*' handler={RootView} />
  </Route>
)

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root />, document.getElementById('all'))
})

Nesting

Nesting

const routes = (
  <Route handler={Chrome}>
    <Route path='about' handler={About} />
    <Route path='inbox' handler={Inbox} />
    <Route path='messages/:id' handler={Message} />
  </Route>
)

import { RouteHandler } from 'react-router'

const Chrome = React.createClass({
  render () {
    return (
      <div>
        <h1>App</h1>
        <RouteHandler />
      </div>
    )
  }
})

URL params

URL params

var Message = React.createClass({
  componentDidMount: function () {
    // from the path `/inbox/messages/:id`
    var id = this.props.params.id
    ...

Other config

Other config

<Route path='/'>
  <DefaultRoute handler={Home} />
  <NotFoundRoute handler={NotFound} />
  
  <Redirect from='login' to='sessions/new' />
  <Redirect from='login' to='sessions/new' params={{from: 'home'}} />
  <Redirect from='profile/:id' to='about-user' />

  <Route name='about-user' ... />

Router.create

Router.create

var router = Router.create({
  routes: <Route>...</Route>,
  location: Router.HistoryLocation
})

router.run((Root) => { ... })
This cheat sheet can be found in the following categories: