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

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

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

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

別眨眼看 React

使用 npm 進(jìn)行安裝：

npm install --save react-router

之后在需要用到的地方進(jìn)行引用，

// 需要用到 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

當(dāng)然也可以使用 script 標(biāo)簽進(jìn)行引用：

之后可以通過 window.ReactRouter 進(jìn)行調(diào)用

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

path: /inbox/messages/1234

+---------+------------+------------------------+
| About   |    Inbox   |                        |
+---------+            +------------------------+
| Compose    Reply    Reply All    Archive      |
+-----------------------------------------------+
|Movie tomorrow|                                |
+--------------+   Subject: TPS Report          |
|TPS Report        From:    [email protected]         |
+--------------+                                |
|New Pull Reque|   So ...                       |
+--------------+                                |
|...           |                                |
+--------------+--------------------------------+

應(yīng)該實(shí)現(xiàn)以下幾種路由：

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

        
App
        {/* 使用 `` 標(biāo)簽進(jìn)行路由跳轉(zhuǎn) */}
        

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

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

const Inbox = (props) => {
  return (
    

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

//  是一個(gè) React 組件
//  同時(shí)也是  的一個(gè)容器，路由規(guī)則使用  進(jìn)行定義
render((
  
    
      {/*
        當(dāng)我們?cè)L問 `/` 的時(shí)候不會(huì)有加載任何子組件，組件 `` 的 `this.props.children`為 `undefined`，
        所以我們使用 ``  來指定默認(rèn)加載的子組件
      */}
      
      
      
        
        { /* 匹配 `/index/messages/123` 路由*/ }
        
        { /* 當(dāng)然我們可以直接匹配 `messages/123`，但不破壞路由組件結(jié)構(gòu) */}
        
          
        
      
    
  
), document.body)

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

嵌套結(jié)構(gòu)

Path 屬性

優(yōu)先級(jí)

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

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

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

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

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

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

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

         // 匹配 /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 是通過從上到下的順序匹配路由的，所以應(yīng)該盡量保證同級(jí)路由的第一個(gè)路由不會(huì)匹配上所有可能的 Path，例如：

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

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

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

import { browserHistory } from "react-router"

然后在 中使用，

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

有三種 history 屬性類型：

browserHistory

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

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

hashHistory

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

我該使用 hashHistory 么？

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

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

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

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

相關(guān)的 API 可以參考 History

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

createMemoryHistory

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

const history = createMemoryHistory(loaction)

考慮以下代碼，

當(dāng)我們?cè)L問 / 的時(shí)候不會(huì)有加載任何子組件，組件 的this.props.children 為 undefined，

當(dāng)然你可以使用 {this.props.children || } 來定義渲染默認(rèn)組件，

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

我們可以使用 組件來定義從一個(gè)路由自動(dòng)跳轉(zhuǎn)至另一個(gè)路由，

  {/* 從 /inbox/messages/:id 跳轉(zhuǎn)到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />

考慮以下代碼，

當(dāng)我們希望訪問 / 的時(shí)候自動(dòng)跳轉(zhuǎn)至 welcome ，即當(dāng)我們?cè)L問跟路由 / 的時(shí)候從定向?yàn)槠渌M件，我們可以使用 組件，

當(dāng)我們想點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)至根路由 / ， 也許我們會(huì)這么寫

Home

實(shí)際上它會(huì)匹配任何以 / 開始的子路由，

當(dāng)我們只希望渲染 Home 相關(guān)的組件， 我們應(yīng)該這么寫

Home

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

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

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

/messages/:id 的 onLeave

/inbox 的 onLeave

/about 的 onEnter

至此基礎(chǔ)篇完結(jié)，之后我會(huì)給大家?guī)磉M(jìn)階篇，歡迎大家持續(xù)關(guān)注，

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