react-router.md

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