本文同步自我的博客 Reeoo’s Blog，迎接移步前去，^_^

概览

本文基于React Router v1.03版本。

React Router是一个为React设想的壮大的路由库。能够协助我们疾速的完成路由功用，包含URL和React components之间的同步映照关联。
在诠释React Router怎样运用之前，我们先来看看在不运用React Router的情况下，是怎样的，接下来的一切例子中都将运用ES2015语法和言语特征。

不运用React Router

import React from 'react'
import { render } from 'react-dom'

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
getInitialState() {
  return {
    route: window.location.hash.substr(1)
  }
},

componentDidMount() {
  window.addEventListener('hashchange', () => {
    this.setState({
      route: window.location.hash.substr(1)
    })
  })
},

render() {
  let Child
  switch (this.state.route) {
    case '/about': Child = About; break;
    case '/inbox': Child = Inbox; break;
    default:      Child = Home;
  }

  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><a href="#/about">About</a></li>
        <li><a href="#/inbox">Inbox</a></li>
      </ul>
      <Child/>
    </div>
  )
}
})

render(<App />, document.body)

当hash值变化的时刻，App 将会依据this.state.route 的值决议衬着哪一个组件（About、Index、Home）到页面上。如许的做法虽然看起来很简单，然则也增加了庞杂性。

设想一下，如果组件 Inbox 有一些嵌套的子组件，它们的路由划定规矩多是如许的：/inbox/message/12345 或许 /inbox/unread 如许的，
上面的路由婚配划定规矩很显然就不能满足我们的需求了，我们不能不修正之前的URL剖析划定规矩，写一堆庞杂的代码来推断哪一种URL应当显现哪一个组件（比方：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats）。

运用React Router

起首，引入React Router

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

把推断路由逻辑的那段代码删除，然后到场Link标签

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        {/* 把`a`标签换成`Link`标签 */}
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>

        {/*
          把`<Child>`替换成`this.props.children`
          路由会衬着准确的组件
        */}
        {this.props.children}
      </div>
    )
  }
})

末了引入<Router>和<Route>，由它们帮我们搞定路由。

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
    </Route>
  </Router>
), document.body)

React Router晓得哪一种URL划定规矩下，衬着哪一个组件到页面上，不须要我们本身在做任何的推断。
比方：/about这类URL划定规矩，会被构建成<App><About /></App>
在React Router内部，会把<Route>标签层级转换成路由设置。如果你不喜欢jsx的这类写法，也能够运用对象的情势：

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    { path: 'about', component: About },
    { path: 'inbox', component: Inbox },
  ]
}

render(<Router routes={routes} />, document.body)

增加更多的视图

OK，现在在inbox路由下嵌套一个messages子路由，
起首须要增加一个新的Message组件：

const Message = React.createClass({
  render() {
    return <h3>Message</h3>
  }
})

然后在原有的inbox路由下面为 Message 组件增加新的路由，如许就能够获得嵌套的组件。

const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {/* 衬着子组件 */}
        {this.props.children}
      </div>
    )
  }
})

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* 在这里到场要嵌套的视图 */}
        {/* render the stats page when at `/inbox` */}
        <IndexRoute component={InboxStats}/>
        {/* 衬着message组件  /inbox/messages/123 */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

接见inbox/messages/12345会婚配新加的路由，App->Inbox->Message,路由层级：

<App>
  <Inbox>
    <Message params={ {id: '12345'} } />
  </Inbox>
</App>

接见/inbox，路由层级：

<App>
    <Inbox>
      <InboxStats />
    </Inbox>
</App>

猎取参数

当我们接见inbox/messages/12345的时刻，我们须要猎取到响应的参数，然后从服务器猎取对应的数据。当视图衬着的时刻，路由组件会注入一些有效的属性到组件上，特别是一些从URL动态猎取的参数信息，在我们这个示例里是：id

const Message = React.createClass({

  componentDidMount() {
    // from the path `/inbox/messages/:id`
    const id = this.props.params.id

    fetchMessage(id, function (err, message) {
      this.setState({ message: message })
    })
  },

  // ...

})

你也能够经由过程查询串来猎取参数，如果我们在浏览器内里接见/foo?bar=baz这个路由,在你的组件中能够经由过程this.props.location.query.bar猎取bar的值baz。

总结

React Router基础用法也许就这么多,一个运用往往是种种组件种种嵌套，搞邃晓了React Router，就能够很轻松的玩转路由。