react-router.md

   1 ---
   2 title: React-router
   3 category: React
   4 layout: default-ad
   5 ---
   6
   7 {% raw %}
   8
   9 ### Basic
  10
  11 ```js
  12 import { default as Router, Route } from 'react-router'
  13
  14 const routes = (
  15   <Route>
  16     <Route path='*' handler={RootView} />
  17   </Route>
  18 )
  19
  20 Router.run(routes, Router.HashLocation, (Root) => {
  21   React.render(<Root />, document.getElementById('all'))
  22 })
  23 ```
  24
  25 ### Nesting
  26
  27 ```js
  28 const routes = (
  29   <Route handler={Chrome}>
  30     <Route path='about' handler={About} />
  31     <Route path='inbox' handler={Inbox} />
  32     <Route path='messages/:id' handler={Message} />
  33   </Route>
  34 )
  35
  36 import { RouteHandler } from 'react-router'
  37
  38 const Chrome = React.createClass({
  39   render () {
  40     return (
  41       <div>
  42         <h1>App</h1>
  43         <RouteHandler />
  44       </div>
  45     )
  46   }
  47 })
  48 ```
  49
  50 ### URL params
  51
  52 ```js
  53 var Message = React.createClass({
  54   componentDidMount: function () {
  55     // from the path `/inbox/messages/:id`
  56     var id = this.props.params.id
  57     ...
  58 ```
  59
  60 ### Link
  61
  62 ```js
  63 import { Link } from 'react-router'
  64
  65 <!-- make a named route `user` -->
  66 <Link to='user' params={{userId: 10}} />
  67
  68 <Link to='login'
  69   activeClassName='-active'
  70   onClick='...'>
  71
  72 ```
  73
  74 ### Other config
  75
  76 ```js
  77 <Route path='/'>
  78   <DefaultRoute handler={Home} />
  79   <NotFoundRoute handler={NotFound} />
  80
  81   <Redirect from='login' to='sessions/new' />
  82   <Redirect from='login' to='sessions/new' params={{from: 'home'}} />
  83   <Redirect from='profile/:id' to='about-user' />
  84
  85   <Route name='about-user' ... />
  86 ```
  87
  88 ### Router.create
  89
  90 ```js
  91 var router = Router.create({
  92   routes: <Route>...</Route>,
  93   location: Router.HistoryLocation
  94 })
  95
  96 router.run((Root) => { ... })
  97 ```
  98
  99 ### Navigation
 100
 101 ```js
 102 import { Navigation } from 'react-router'
 103
 104 React.createClass({
 105   mixins: [ Navigation ], ...
 106 })
 107
 108 this
 109   .transitionTo('user', {id: 10})
 110   .transitionTo('/path')
 111   .transitionTo('http://...')
 112   .replaceWith('about')
 113   .makePath('about') // return URL
 114   .makeHref('about') // return URL
 115   .goBack()
 116 ```
 117
 118 {% endraw %}