摘要：該手冊是基于和使用教程學習編寫而成，可能會有描述不夠清楚的地方，大家可自行參考原文，為提供了一個完整的路由庫，它允許你通過的變化來控制組件的切換與變化有關全家桶的其余相關文章，可以查看以下鏈接，會持續(xù)更新別眨眼看安裝使用進行安裝之后

該手冊是基于react-router 和 React Router 使用教程 學習編寫而成，可能會有描述不夠清楚的地方，大家可自行參考原文，

React Router 為 React 提供了一個完整的路由庫，它允許你通過 URl 的變化來控制組件的切換與變化

有關 React 全家桶的其余相關文章，可以查看以下鏈接，會持續(xù)更新

別眨眼看 React

使用 npm 進行安裝：

npm install --save react-router

之后在需要用到的地方進行引用，

// 需要用到 ES6 編譯器，比如 babel
import { Router, Route, Link } from "react-router"

// 不需要使用編譯器
var Router = require("react-router").Router
var Route = require("react-router").Route
var Link = require("react-router").Link

當然也可以使用 script 標簽進行引用：

之后可以通過 window.ReactRouter 進行調用

當我們想要實現(xiàn)類似信息系統(tǒng)的界面，進入到收件箱選擇查看具體信息 1234 的時候，界面路由如下：

path: /inbox/messages/1234

+---------+------------+------------------------+
| About   |    Inbox   |                        |
+---------+            +------------------------+
| Compose    Reply    Reply All    Archive      |
+-----------------------------------------------+
|Movie tomorrow|                                |
+--------------+   Subject: TPS Report          |
|TPS Report        From:    boss@big.co         |
+--------------+                                |
|New Pull Reque|   So ...                       |
+--------------+                                |
|...           |                                |
+--------------+--------------------------------+

應該實現(xiàn)以下幾種路由：

// 省略部分組件定義
const App = React.createClass({
  render() {
    return (
      

        
App
        {/* 使用 `` 標簽進行路由跳轉 */}
        

          
About
          
Inbox
        
        {this.props.children}
      
    )
  }
})

const About = ...;
const Home = ...;

const Inbox = (props) => {
  return (
    

       
Inbox
       {props.children}
     
  )
}
const IndexStatus = ...;
const Message = ...;

//  是一個 React 組件
//  同時也是  的一個容器，路由規(guī)則使用  進行定義
render((
  
    
      {/*
        當我們訪問 `/` 的時候不會有加載任何子組件，組件 `` 的 `this.props.children`為 `undefined`，
        所以我們使用 ``  來指定默認加載的子組件
      */}
      
      
      
        
        { /* 匹配 `/index/messages/123` 路由*/ }
        
        { /* 當然我們可以直接匹配 `messages/123`，但不破壞路由組件結構 */}
        
          
        
      
    
  
), document.body)

一個路由由三個屬性來決定它是否能匹配上 URL:

嵌套結構

Path 屬性

優(yōu)先級

當一個 URL 被調用，React Router 允許你通過嵌套路由 (Nested routes) 的方式來聲明將要被渲染的一系列嵌套組件，嵌套路由是類樹狀結構 (tree-like structure)，React Router 通過 route config 的順序去匹配 URL

RouteConfig 是 React Router 內部用來指定 router 順序的數(shù)組

:paramName，匹配 URL 的一個部分，直到遇到下一個/、?、#

()，表示URL的這個部分是可選的

*，匹配任意字符(非貪婪模式)，直到模式里面的下一個字符為

**，匹配任意字符(貪婪模式)，直到下一個/、?、#為止

貪婪模式：在整個表達式匹配成功的前提下，盡可能少的匹配
非貪婪模式：在整個表達式匹配成功的前提下，盡可能多的匹配

         // 匹配 /hello/michael 和 /hello/ryan
       // 匹配 /hello, /hello/michael, 和 /hello/ryan
           // 匹配 /files/hello.jpg 和 /files/hello.html
            // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

React Router 是通過從上到下的順序匹配路由的，所以應該盡量保證同級路由的第一個路由不會匹配上所有可能的 Path，例如：

  
 // 這一條路由規(guī)則是不會執(zhí)行的，以為上一條路由已經(jīng)匹配了所有路徑為 `/comments`

React Router 構建于 history，簡而言之，React Router history 屬性用于監(jiān)聽瀏覽器地址欄的變化，
并將 URL 解析后放入進 location 對象中，給 React Router 提供匹配，

我們使用如下方式從 React Router Package 中引用，

import { browserHistory } from "react-router"

然后在 中使用，

render(
  ,
  document.getElementById("app")
)

有三種 history 屬性類型：

browserHistory

Browser history 是通過 URL 變化來改變路由的，它是背后調用的是瀏覽器的 History，

但是，使用 Browser history 是需要配置你的服務器

hashHistory

Hash history 使用哈希符 (#) 作為 URL 的一部分，路由通過哈希符的部分進行切換，URL 的形式類似于，example.com/#/some/path，

我該使用 hashHistory 么？

Hash history 不需要你配置服務器即可使用，當你剛剛開始使用 React Router 的時候，就是用它吧，但是一般來說，生產(chǎn)環(huán)境下的 web 應用應該使用 browserHistory 來保持 URLs 的整潔度，并且 hashHistory 是不支持服務端渲染的

實際使用當中，我們會發(fā)現(xiàn)具體的 URL 可能為 example.com/#/some/path?_k=ckuvup，

所以 ?_k=ckuvup 是垃圾代碼什么 ？

當我們使用 web 應用的時候，瀏覽器記錄 (history) 通過 push 或者 replace 來產(chǎn)生變換，瀏覽器記錄會存儲一個地址狀態(tài) (location state)，但并不會體現(xiàn)在 URL 中，

相關的 API 可以參考 History

而在 DOM API 中，改變 Hash history 的方式僅僅是通過 window.location.hash = newHash，這并沒有辦法保存地址狀態(tài)，但是我們希望所有的歷史記錄都能夠使用地址狀態(tài)，所以我們?yōu)槊恳粋€地址產(chǎn)生一個獨一無二的鍵值用以表示地址狀態(tài)，當我們在瀏覽器中點擊后退或者前進的時候，我們就有辦法來之前的地址狀態(tài)了

createMemoryHistory

Memory history 并不會從地址欄中操作或是讀取，它能夠幫助我們完成服務器端的渲染，或者用于測試以及其他渲染環(huán)境 (比如 React Native)，和其他兩種方式不一樣的是，我們需要在內存中創(chuàng)建 history 對象來使用，

const history = createMemoryHistory(loaction)

考慮以下代碼，

當我們訪問 / 的時候不會有加載任何子組件，組件 的this.props.children 為 undefined，

當然你可以使用 {this.props.children || } 來定義渲染默認組件，

但 Home 并沒有出現(xiàn)在路由當中，所以這樣寫并不是非常直觀，因此可以使用 來指定當指定子組件不存在時加載默認的子組件，

我們可以使用 組件來定義從一個路由自動跳轉至另一個路由，

  {/* 從 /inbox/messages/:id 跳轉到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />

考慮以下代碼，

當我們希望訪問 / 的時候自動跳轉至 welcome ，即當我們訪問跟路由 / 的時候從定向為其他組件，我們可以使用 組件，

當我們想點擊一個鏈接跳轉至根路由 / ， 也許我們會這么寫

Home

實際上它會匹配任何以 / 開始的子路由，

當我們只希望渲染 Home 相關的組件， 我們應該這么寫

Home

路由組件 (Route) 都擁有 onEnter 和 onLeave 鉤子，當一個路由被觸發(fā)時，進入該路由時觸發(fā) onEnter ，離開該路由時觸發(fā) onLeave，這兩個鉤子非常的有用，比如當進入一個路由時，需要先判斷時候授權，就會可以使用 onEnter，

在路由跳轉過程中，onLeave hook 會在所有將離開的路由中觸發(fā)，從最下層的子路由開始直到最外層父路由結束，然后 onEnter hook會從最外層的父路由開始直到最下層子路由結束，

回到概述中的例子，如果我們的路由從 /messages/5 跳轉到 /about，下面是這些 hook 的執(zhí)行順序：

/messages/:id 的 onLeave

/inbox 的 onLeave

/about 的 onEnter

至此基礎篇完結，之后我會給大家?guī)磉M階篇，歡迎大家持續(xù)關注，

同時如果文章中有任何錯誤，歡迎大家指出，好的文章需要你的支持，謝謝