简介

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

为了向你说明 React Router 解决的问题，让我们先来创建一个不使用它的应用。所有文档中的示例代码都会使用 ES6/ES2015 语法和语言特性。

不使用 React Router

  1. import React from 'react'
  2. import { render } from 'react-dom'
  4. const About = React.createClass({/*...*/})
  5. const Inbox = React.createClass({/*...*/})
  6. const Home = React.createClass({/*...*/})
  8. const App = React.createClass({
  9.   getInitialState() {
  10.     return {
  11.       route: window.location.hash.substr(1)
  12.     }
  13.   },
  15.   componentDidMount() {
  16.     window.addEventListener('hashchange', () => {
  17.       this.setState({
  18.         route: window.location.hash.substr(1)
  19.       })
  20.     })
  21.   },
  23.   render() {
  24.     let Child
  25.     switch (this.state.route) {
  26.       case '/about': Child = About; break;
  27.       case '/inbox': Child = Inbox; break;
  28.       default:      Child = Home;
  29.     }
  31.     return (
  32.       <div>
  33.         <h1>App</h1>
  34.         <ul>
  35.           <li><a href="#/about">About</a></li>
  36.           <li><a href="#/inbox">Inbox</a></li>
  37.         </ul>
  38.         <Child/>
  39.       </div>
  40.     )
  41.   }
  42. })
  44. React.render(<App />, document.body)

当 URL 的 hash 部分（指的是 # 后的部分）变化后，<App> 会根据 this.state.route 来渲染不同的 <Child>。看起来很直接，但它很快就会变得复杂起来。

现在设想一下 Inbox 下面嵌套一些分别对应于不同 URL 的 UI 组件，就像下面这样的列表-详情视图：

  1. path: /inbox/messages/1234
  3. +---------+------------+------------------------+
  4. | About   |    Inbox   |                        |
  5. +---------+            +------------------------+
  6. | Compose    Reply    Reply All    Archive      |
  7. +-----------------------------------------------+
  8. |Movie tomorrow|                                |
  9. +--------------+   Subject: TPS Report          |
  10. |TPS Report        From:    boss@big.co         |
  11. +--------------+                                |
  12. |New Pull Reque|   So ...                       |
  13. +--------------+                                |
  14. |...           |                                |
  15. +--------------+--------------------------------+

还可能有一个状态页，用于在没有选择 message 时展示：

  1. path: /inbox
  3. +---------+------------+------------------------+
  4. | About   |    Inbox   |                        |
  5. +---------+            +------------------------+
  6. | Compose    Reply    Reply All    Archive      |
  7. +-----------------------------------------------+
  8. |Movie tomorrow|                                |
  9. +--------------+   10 Unread Messages           |
  10. |TPS Report    |   22 drafts                    |
  11. +--------------+                                |
  12. |New Pull Reque|                                |
  13. +--------------+                                |
  14. |...           |                                |
  15. +--------------+--------------------------------+

为了让我们的 URL 解析变得更智能，我们需要编写很多代码来实现指定 URL 应该渲染哪一个嵌套的 UI 组件分支：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats，等等。

使用 React Router 后

让我们用 React Router 重构这个应用。

  1. import React from 'react'
  2. import { render } from 'react-dom'
  4. // 首先我们需要导入一些组件...
  5. import { Router, Route, Link } from 'react-router'
  7. // 然后我们从应用中删除一堆代码和
  8. // 增加一些 <Link> 元素...
  9. const App = React.createClass({
  10.   render() {
  11.     return (
  12.       <div>
  13.         <h1>App</h1>
  14.         {/* 把 <a> 变成 <Link> */}
  15.         <ul>
  16.           <li><Link to="/about">About</Link></li>
  17.           <li><Link to="/inbox">Inbox</Link></li>
  18.         </ul>
  20.         {/*
  21.           接着用 `this.props.children` 替换 `<Child>`
  22.           router 会帮我们找到这个 children
  23.         */}
  24.         {this.props.children}
  25.       </div>
  26.     )
  27.   }
  28. })
  30. // 最后，我们用一些 <Route> 来渲染 <Router>。
  31. // 这些就是路由提供的我们想要的东西。
  32. React.render((
  33.   <Router>
  34.     <Route path="/" component={App}>
  35.       <Route path="about" component={About} />
  36.       <Route path="inbox" component={Inbox} />
  37.     </Route>
  38.   </Router>
  39. ), document.body)

React Router 知道如何为我们搭建嵌套的 UI，因此我们不用手动找出需要渲染哪些 <Child> 组件。举个例子，对于一个完整的 /about 路径，React Router 会搭建出 <App><About /></App>。

在内部，router 会将你树级嵌套格式的 <Route> 转变成路由配置。但如果你不熟悉 JSX，你也可以用普通对象来替代：

  1. const routes = {
  2.   path: '/',
  3.   component: App,
  4.   childRoutes: [
  5.     { path: 'about', component: About },
  6.     { path: 'inbox', component: Inbox },
  7.   ]
  8. }
  10. React.render(<Router routes={routes} />, document.body)

添加更多的 UI

好了，现在我们准备在 inbox UI 内嵌套 inbox messages。

  1. // 新建一个组件让其在 Inbox 内部渲染
  2. const Message = React.createClass({
  3.   render() {
  4.     return <h3>Message</h3>
  5.   }
  6. })
  8. const Inbox = React.createClass({
  9.   render() {
  10.     return (
  11.       <div>
  12.         <h2>Inbox</h2>
  13.         {/* 渲染这个 child 路由组件 */}
  14.         {this.props.children || "Welcome to your Inbox"}
  15.       </div>
  16.     )
  17.   }
  18. })
  20. React.render((
  21.   <Router>
  22.     <Route path="/" component={App}>
  23.       <Route path="about" component={About} />
  24.       <Route path="inbox" component={Inbox}>
  25.         {/* 添加一个路由，嵌套进我们想要嵌套的 UI 里 */}
  26.         <Route path="messages/:id" component={Message} />
  27.       </Route>
  28.     </Route>
  29.   </Router>
  30. ), document.body)

现在访问 URL inbox/messages/Jkei3c32 将会匹配到一个新的路由，并且它成功指向了 App -> Inbox -> Message 这个 UI 的分支。

  1. <App>
  2.   <Inbox>
  3.     <Message params={ {id: 'Jkei3c32'} } />
  4.   </Inbox>
  5. </App>

获取 URL 参数

为了从服务器获取 message 数据，我们首先需要知道它的信息。当渲染组件时，React Router 会自动向 Route 组件中注入一些有用的信息，尤其是路径中动态部分的参数。我们的例子中，它指的是 :id。

  1. const Message = React.createClass({
  3.   componentDidMount() {
  4.     // 来自于路径 `/inbox/messages/:id`
  5.     const id = this.props.params.id
  7.     fetchMessage(id, function (err, message) {
  8.       this.setState({ message: message })
  9.     })
  10.   },
  12.   // ...
  14. })

你也可以通过 query 字符串来访问参数。比如你访问 /foo?bar=baz，你可以通过访问 this.props.location.query.bar 从 Route 组件中获得 "baz" 的值。

这就是 React Router 的奥秘。应用的 UI 以盒子中嵌套盒子的方式来表现；然后你可以让这些盒子与 URL 始终保持同步，而且很容易地把它们链接起来。

这个关于 路由配置 的文档深入地描述了 router 的功能。