React Router

[zchfeng]

一、基础用法

<Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Router>

上面代码中，用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件；访问/about（http://localhost:8080/#/about）时，加载About组件。

二、嵌套路由

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

上面代码中，用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。

三、path 属性

Route组件的path属性指定路由的匹配规则。这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
</Route>

上面代码中，当用户访问/inbox/messages/:id时，会加载Message组件。

path属性可以使用通配符。

<Route path="/hello/:name">
<Route path="/files/*.*">

四、Redirect 组件

组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由 ``` {/* 从 /inbox/messages/:id 跳转到 /messages/:id */} ＜Redirect from="messages/:id" to="/messages/:id" /> ``` 现在访问/inbox/messages/5，会自动跳转到/messages/5。 ## 五、history - `browserHistory`：Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 [History](https://developer.mozilla.org/en-US/docs/Web/API/History) API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。`当在服务器上找不到其他文件时，这可以让 nginx 服务器提供静态文件服务并指向index.html 文件。` - `hashHistory`：Hash history 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。 - `createMemoryHistory`：Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。 ## 六、路由守卫 - `routerWillLeave`：跳转前确认 ## [react-router](http://react-guide.github.io/react-router-cn/docs/Introduction.html)

[zchfeng]

路由跳转

• 1、

  <link to="/child/007>111</link>

• 2、history.push()

  this.props.history.push('/child02')
  this.props.history.push({path那么:'/child',query:{name:'jack,age:18}’})

• 3、接受参数

  this.props.match.params.id
  this.props.location.query