react router 学习总结

1.Router的嵌套及格式，子Route是嵌套在父Route里面的

　　

  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* Add the route, nested where we want the UI to nest */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>

2. 如何获取route中的参数，在route中设定参数后，可以用this.props.params参数名获取参数

参数设定：<Route path="showwork/:id" name="showwork"  handler={ShowProduction}/>
获取参数：const id = this.props.params.id

3. route中设置默认的子组件，如果path刚刚match到父组件，子组件也会呈现出来。

　　

 <Route path="/" component={App}>
      {/* Show the dashboard at / */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
url component
/　　App -> Dashboard

4. 如果自组件使用了绝对路径，那么可以通过绝对路径访问到自组件，但同时也会渲染它的父组件。

　　

 <Router>
    <Route path="/" component={App}>
      {/* Show the dashboard at / */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="/messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>

　　url component

/messages/:id App -> Inbox -> Message

5.url Redirect. 当你改变一个组件的path时，会导致其他组件链接到该组件的url失效（url都变了不可能不失效啊），那么Redirect是你最好的选择

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="/messages/:id" component={Message} />

        {/* Redirect /inbox/messages/:id to /messages/:id */}
        <Redirect from="messages/:id" to="/messages/:id" />
      </Route>
    </Route>
  </Router>
), document.body)

6. path 语法

　　: 跟在/ , # , ?后面，表示一个参数 /hello/1 1就是参数

　　 ? 跟在url后面，表示这部分是可选的

　　* 匹配所有的字符直到遇到第一个*号后面的字符(非贪婪模式)，如果*后面没有字符，那么就匹配到url末尾。例如 /file/*.png 会匹配 /file/1.png 但不会匹配 　　　　　　 /file/1.png/1.png

<Route path="/hello/:name">         // matches /hello/michael and /hello/ryan
<Route path="/hello/:name?">       // matches /hello, /hello/michael, and /hello/ryan
<Route path="/files/*.*">           // matches /files/hello.jpg and /files/path/to/hello.jpg

7. 注意：不要使得一个path会被两个兄弟route匹配到，不要像下面这样做

　　

<Route path="/comments" ... />
<Redirect from="/comments" ... />

8 history

　　createHashHistory: 默认history，但是它使用url的hash(#)部分来创建route，所以整个url看起来像这样。http://www.example.com/#/some/path.注意hash的改变并不会导致页面的刷新。

　　createBrowserHistory: 对于浏览器应用来说，browser history使用了浏览器内置的history api（javascript内的api）　　

　　createMemoryHistory

history的使用：注意默认是createHashHistory。

React.render(
  <Router history={createBrowserHistory()}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
);

9. routerWillLeave ,当使用了这个钩子时，每当离开这个route时，routerWillLeave就会被调用，你可以直接return false；来取消退出，或者return 一段消息提示来让用户选择是否退出。对应的js事件是onbeforeunload事件。

import { Lifecycle } from 'react-router'

const Home = React.createClass({

  // Assuming Home is a route component, it may use the
  // Lifecycle mixin to get a routerWillLeave method.
  mixins: [ Lifecycle ],

  routerWillLeave(nextLocation) {
    if (!this.state.isSaved)
      return 'Your work is not saved! Are you sure you want to leave?'
  },

  // ...

})

　　如果组件是多层嵌套的话，需要加上RouteContext.

import { Lifecycle, RouteContext } from 'react-router'

const Home = React.createClass({

  // Home should provide its route in context
  // for descendants further down the hierarchy.
  mixins: [ RouteContext ],

  render() {
    return <NestedForm />
  }

})

const NestedForm = React.createClass({

  // Descendants use the Lifecycle mixin to get
  // a routerWillLeave method.
  mixins: [ Lifecycle ],

  routerWillLeave(nextLocation) {
    if (!this.state.isSaved)
      return 'Your work is not saved! Are you sure you want to leave?'
  },

  // ...

})

10.component lifecycle 在route地址迁移时引发的react的周期事件，非常重要。，地址：https://github.com/rackt/react-router/blob/master/docs/advanced/ComponentLifecycle.md