This is Devhints.io cheatsheets — a collection of cheatsheets I've written.

# React-router

### 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

    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

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

### Link

    import { Link } from 'react-router'

    <!-- make a named route `user` -->
    <Link to='user' params={{userId: 10}} />

    <Link to='login'
      activeClassName='-active'
      onClick='...'>

### 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

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

    router.run((Root) => { ... })

### Navigation

    import { Navigation } from 'react-router'

    React.createClass({
      mixins: [ Navigation ], ...
    })

    this
      .transitionTo('user', {id: 10})
      .transitionTo('/path')
      .transitionTo('http://...')
      .replaceWith('about')
      .makePath('about') // return URL
      .makeHref('about') // return URL
      .goBack()

Devhints.io cheatsheets is a collection of cheatsheets I've written over the years. Suggestions and corrections? Send them in. I'm Rico Sta. Cruz. Check out my Today I learned blog for more.