摘要：談談最近使用的來開發項目，感覺確實是爽的飛起，然而總感覺還是少了點什么。注意當前版本依賴的是請不要安裝最新版。同樣的也有這個方法表示在離開路由前執行。會深度優先遍歷整個理由配置來尋找一個與給定的相匹配的路由。配置是建立在之上的。

最近使用的 React + webpack 來開發項目，感覺確實是爽的飛起，然而總感覺還是少了點什么。
對，是多頁面，每次請求頁面還要后端路由給你？多不爽啊，試試 react-router ，簡直掌控一切的感覺，只開放一個頁面路由接口，其他全給數據接口就了，可以和后端哥哥說拜拜了。
??????????? 啪啪啪啪啪～

先貼上官方文檔 https://github.com/rackt/react-router/tree/master/docs.
對了這里還有一份中文文檔（不過不是很全）http://react-guide.github.io/react-router-cn/.
react-router 是 React 的完整前端路由解決方案，特別在做一個 spa 應用的時候，他能實現 url 和 視圖ui 的同步，并且支持后端渲染，異步按需加載等等。
由于 react-router 文檔的多變，這里的例子以當前版本 1.0.1 為準。（1.0之前文檔每一個版本的變動都很大，索多了都是淚）

所有支持 React 的瀏覽器。
倡議！建議大家也勸說身邊的人用現代化瀏覽器，關愛前端開發者。

npm install react-router@latest

同時，react-router 是基于 history 開發的，這里你需要安裝 history。
注意 react-router 當前版本 1.0.1 依賴的是 history 1.13.1 請不要安裝最新版。
不要問我為什么知道，被坑慘了；有同學問，那沒有辦法用 history 的最新版本嘛？畢竟這只是暫緩之計，解決方案還是有的，那就是等 react-router 作者解決咯 ?。

npm install history@1.13.1

構建工具的話，我依然建議是 webpack ， React 和 webpack 是一對好兄弟。

npm install webpack

webpack的使用方法可以看我的前兩篇文章：

webpack-best-practice-最佳實踐-部署生產

如何使用webpack—webpack-howto
(求贊！！！)

// 加載依賴包，這是 es6 的語法（我好啰嗦）。
import React from "react"
import { render } from "react-dom"
// 這里從 react-router 引入了三個組件，先不解釋。
import { Router, Route, Link } from "react-router"

const App = React.createClass({
  render() {
    return (
      

        
App
        

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

const Inbox = React.createClass({
  render() {
    return (
      

        Inbox
      
    )
  }
});

const About = React.createClass({
  render() {
    return (
      

        About
      
    )
  }
});

render((
  
    
      
      
    
  
), document.getElementById("root"));

我就偷個懶把官方文檔的demo直接copy了。
直接先來看 render 下面的內容，這里是用 jsx 語法。 最外層組件是 Router（可以把他看作是react-router提供的最外層容器） , 下一層是 Route，這個是路由組件。對應關系如下：
/ --->
/about --->
/inbox --->
path 對應路徑，component 對應當前路徑渲染的組件。
Route 里面的 Route 表示在父組件路由的 path 路徑下面的一級 path 對應的路由，這里的路由是父子嵌套，對應的組件也同樣是父子嵌套的。
如果是多級嵌套也同樣如此。

以上例子可以改寫成：

...
const routerConfig = [
  {
    path: "/",
    component: App,
    childrenRoutes: [
      { path: "about", component: About },
      { path: "inbox", component: Inbox },
    ]
  }
];
render((
  
), document.getElementById("root"));

這里的結構就更清晰了，我是比較喜歡這種方式。

比如上面的例子，/ 對于的組件是 App , 如果 App 只是渲染了一個導航條，卻沒有自組件，那打開 比如 qiutc.me/ 的時候不是就沒有內容了嗎。
把上面例子改一下

...
// 添加組件 Index
const Index = React.createClass({
  render() {
    return (
      

        Index
        Index
        Index
      
    )
  }
});
// 修改配置
const routerConfig = [
  {
    path: "/",
    component: App,
    indexRoute: { component: Index },
    childrenRoutes: [
      { path: "about", component: About },
      { path: "inbox", component: Inbox },
    ]
  }
];

這里加了一個 indexRoute ，表示他在沒有匹配子路由的時候，在 / 路由下渲染默認的子組件 Index。
路由組件嵌套也是一樣的，比如：

      { path: "about", component: About, indexRoute: {component: AboutIndex} },

以此類推。

如果我們打開了一個沒有設置路由的鏈接，就必然需要一個友好的 404 頁面。配置如下：

...
// 添加 404 組件
const NotFound = React.createClass({
  render() {
    return (
      

        404
        NotFound
      
    )
  }
});
// 修改配置
const routerConfig = [
  {
    path: "/",
    component: App,
    indexRoute: { component: Index },
    childrenRoutes: [
      { path: "about", component: About },
      { path: "inbox", component: Inbox },
    ]
  },
  {
    path: "*",
    component: NotFound,
  }
];

如此簡單。

const routerConfig = [
  {
    path: "/",
    component: App,
    indexRoute: { component: Index },
    childrenRoutes: [
      { path: "about", component: About },
      {
        path: "inbox",
        component: Inbox,
        childrenRoutes: [
          {
            path: "message/:id",
            component: Message,
          }
        ],
      },
    ]
  },
  {
    path: "*",
    component: NotFound,
  }
];

在這里我們訪問 /inbox/message/1 對于渲染 Message 組件，這個鏈接太長了，我們想直接 /message/1 那怎么辦，改路由結構？太麻煩了！絕對路徑可以幫你做到這個。
把 path: "message/:id", 改為 path: "/message/:id", 就好了。
等等如果用戶之前收藏的鏈接是 /inbox/message/1 ，那不是就打不開了嘛，和后端路由一樣，react-router 也有重定向：redirect

const routerConfig = [
  {
    path: "/",
    component: App,
    indexRoute: { component: Index },
    childrenRoutes: [
      { path: "about", component: About },
      {
        path: "inbox",
        component: Inbox,
        childrenRoutes: [
          {
            path: "/message/:id",
            component: Message,
          },
          {
            path: "message/:id",
            onEnter: function (nextState, replaceState) {
              replaceState(null, "/messages/" + nextState.params.id);
            }
          }
        ],
      },
    ]
  },
  {
    path: "*",
    component: NotFound,
  }
];

function (nextState, replaceState) {
  replaceState(null, "/messages/" + nextState.params.id);
}

nextState表示要進入的下一個路由，這里就是 /inbox/messages/:id ，replaceState 表示替換路由狀態的方法，把 /inbox/messages/:id 替換成 /messages/:id，然后就可以重定向到 /messages/:id。

表示在離開路由前執行。
———————————————————
當然如果你用的是 jsx 語法，有更簡單的組件可以實現：

import { Redirect } from "react-router"

React.render((
  
    
      
      
      
        
        {/* 跳轉 /inbox/messages/:id 到 /messages/:id */}
        
      
    
  
), document.getElementById("root"))

React Router 使用路由嵌套的概念來讓你定義 view 的嵌套集合，當一個給定的 URL 被調用時，整個集合中（命中的部分）都會被渲染。嵌套路由被描述成一種樹形結構。React Router 會深度優先遍歷整個理由配置來尋找一個與給定的 URL 相匹配的路由。

簡單來講，就是說，匹配的時候會先匹配到外層路徑，然后依次遍歷到內層。
比如 /inbox/messages/:id 會先匹配 /，渲染 / 對應的組件 App，然后再到 / 的下一層尋找 /inbox ，同樣渲染 /inbox 對應的組件 Inbox，依次類推，直到到 message/:id。

tip：使用絕對路徑可以忽略嵌套關系，如上面例子。

路由路徑是匹配一個（或一部分）URL 的 一個字符串模式。大部分的路由路徑都可以直接按照字面量理解，除了以下幾個特殊的符號：

/:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分將被作為一個參數

(/) – 在它內部的內容被認為是可選的

/* – 匹配任意字符（非貪婪的）直到命中下一個字符或者整個 URL 的末尾，并創建一個 splat 參數

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

最后，路由算法會根據定義的順序自頂向下匹配路由。因此，當你擁有兩個兄弟路由節點配置時，你必須確認前一個路由不會匹配后一個路由中的路徑。例如：

第二個是不會被執行的。

比如上面的 /messages/:id ，這個id可能是我們在 Message 獲取數據時需要的 id。
他會被當做一個參數傳給 params，parmas 會傳給 Message 組件的 props：

const Message = React.createClass({
    render: function() {
      return (
        
{ this.props.params.id }
      );
    }
});

這樣就可以獲取到了。

React Router 是建立在 history 之上的。 簡而言之，一個 history 知道如何去監聽瀏覽器地址欄的變化， 并解析這個 URL 轉化為 location 對象， 然后 router 使用它匹配到路由，最后正確地渲染對應的組件。
常用的 history 有三種形式， 但是你也可以使用 React Router 實現自定義的 history。

createHashHistory

createBrowserHistory

createMemoryHistory

這是一個你會獲取到的默認 history ，如果你不指定某個 history 。它用到的是 URL 中的 hash（#）部分去創建形如 example.com/#/some/path 的路由。
這個 支持 ie8＋ 的瀏覽器，但是因為是 hash 值，所以不推薦使用。

Browser history 是由 React Router 創建瀏覽器應用推薦的 history。它使用 History API 在瀏覽器中被創建用于處理 URL，新建一個像這樣真實的 URL example.com/some/path。

不會在地址欄被操作或讀取。

import { createBrowserHistory, useBasename } from "history";
const historyConfig = useBasename(createHistory)({
  basename: "/"        // 根目錄名
});
...
render((
  
), document.getElementById("root"));

我們在最開頭看到這樣一個東西：

const App = React.createClass({
  render() {
    return (
      

        
App
        

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

Link 會被渲染成 a ，to 其實就是 href ，
但是 react-router 會阻止默認跳轉頁面，而改成 history 路由的變換。

參數：

to
切換到的路由地址

query
跟在 url 的 query 參數，比如

query={{q: "que"}} 對應 `/example?a=que

這里的 query 同樣可以像 params 會被傳入下一個路由組件的 props

hash
跟在 url 的 hash 參數，比如

hash={111} 對應 `/example#111

這里的 query 同樣可以像 params 會被傳入下一個路由組件的 props

activeClassName
當前 url 路徑如果和 Link 的 to 匹配 這個 Link 就會有一個定義的屬性，比如：

在 /index 下
/
這里渲染出來的 a 標簽會有一個激活的 active 類名，還會有一個顏色 red
/
這里渲染出來的 a 標簽就不會有以上屬性

activeStyle
同上

onClick
點擊的時候執行的函數，會傳入一個 e 事件對象，你可以 e.stopPropagation() 阻止默認路由切換。

在上面有一個問題如果：

在 / 下 和 /index
/
這個 Link 渲染出來的 a 標簽都會激活 active 屬性，并且會帶上 color: "red"
因為 / 和 /index 和 ／ 都是匹配的

這時候就可以用:

/
只會在 / 下唄激活，在 /index 或者其他下面，不會被激活

關于 根據路由按需異步加載js 和 服務器端渲染路由視圖 以及 react-router的更高級用法 會在下一篇文章來探討。
畢竟哥也需要去深入研究一下才敢獻丑。
?