React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，最近學習了一下，主要是看了一下官方的英文文檔，加以總結，以備后查。

React Router是做什么的呢，官方的介紹是：

A complete routing library for React，keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

大意即：讓UI組件和URL保持同步,通過簡單的API即可實現強大的特性如：代碼懶加載，動態路由匹配，路徑過渡處理等。

下面是一些React Router的用法：

一 簡單渲染Route

有一點需要牢記于心，Router 是作為一個React組件，可以進行渲染。

// ...import { Router, Route, hashHistory } from 'react-router'render(( <Router history={hashHistory}>  <Route path="/" component={App}/> </Router>), document.getElementById('app'))

這里使用了hashHistory - 它管理路由歷史與URL的哈希部分。

添加更多的路由，并指定它們對應的組件

import About from './modules/About'import Repos from './modules/Repos'render(( <Router history={hashHistory}>  <Route path="/" component={App}/>  <Route path="/repos" component={Repos}/>  <Route path="/about" component={About}/> </Router>), document.getElementById('app'))

二 Link

// modules/App.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() {  return (   <div>    <h1>React Router Tutorial</h1>    <ul role="nav">     <li><Link to="/about">About</Link></li>     <li><Link to="/repos">Repos</Link></li>    </ul>   </div>  ) }})

這里使用了Link 組件，它可以渲染出鏈接并使用 to 屬性指向相應的路由。

三 嵌套路由

如果我們想添加一個導航欄，需要存在于每個頁面上。如果沒有路由器，我們就需要封裝一個一個nav組件，并在每一個頁面組件都引用和渲染。隨著應用程序的增長代碼會顯得很冗余。React-router則提供了另一種方式來嵌套共享UI組件。

實際上，我們的app都是一系列嵌套的盒子，對應的url也能夠說明這種嵌套關系：

<App>    {/* url /     */} <Repos>  {/* url /repos   */}  <Repo/> {/* url /repos/123 */} </Repos></App>

因此，可以通過把子組件嵌套到 公共組件 App上使得 App組件上的 導航欄 Nav 等公共部分能夠共享：

// index.js// ...render(( <Router history={hashHistory}>  <Route path="/" component={App}>   {/* 注意這里把兩個子組件放在Route里嵌套在了App的Route里/}   <Route path="/repos" component={Repos}/>   <Route path="/about" component={About}/>  </Route> </Router>), document.getElementById('app'))