最近業(yè)余時間在學習 React，配合 Redux 和 React-Router 正在不緊不慢地開發(fā)一個小工具moviemaster，用于管理硬盤中的電影劇集。在單頁應用開發(fā)中，redux 并不是必須的，所以今天只講講 前端的路由系統(tǒng)以及 React-Router的簡單使用。

什么是路由

以下來自維基百科：：

路由(routing)就是通過互聯(lián)的網(wǎng)絡把信息從源地址傳輸?shù)侥康牡刂返幕顒印Ｂ酚砂l(fā)生在OSI網(wǎng)絡參考模型中的第三層即網(wǎng)路層。路由引導分組轉(zhuǎn)送，經(jīng)過一些中間的節(jié)點后，到它們***的目的地。

這是網(wǎng)絡工程中的術(shù)語，對大家而言，最熟悉的應該就是家里的路由器。路由是指路由器從一個接口上收到數(shù)據(jù)包，根據(jù)數(shù)據(jù)包的目的地址進行定向并轉(zhuǎn)發(fā)到另一個接口的過程。放在 Web 上來說，url 就像是路由器中的路由表，每個 url 對應不同的頁面或者內(nèi)容，就像路由表中的的 IP 對應不同的網(wǎng)絡一樣。

先來看一下熟悉的套路：

在傳統(tǒng)的網(wǎng)頁應用架構(gòu)中，客戶端只是一個展示層，通過 url 訪問服務端，服務端則根據(jù)自己的“路由表”將對應的頁面分發(fā)給客戶端。但是在這種模式下，ajax 異步加載的內(nèi)容是無法通過url 記錄的。無論你在頁面上操作了多少，異步請求了多少數(shù)據(jù)，在每次重新訪問同一個 url 時，服務端返回給客戶端的內(nèi)容都是一模一樣。

如果前端有自己專屬的“路由表”來分發(fā)頁面上不同的狀態(tài)，那不就行了?

Hash 和 pushState

據(jù)我所知，目前有兩種方式可以構(gòu)建出前端的路由系統(tǒng)：url 中的#和 HTML5中的 history API。其原理如下：

• 阻止標簽的默認跳轉(zhuǎn)動作。
• ajax或者 Fetch 請求內(nèi)容。
• 將返回的內(nèi)容添加到頁面中。
• 使用 hash 或者 pushState 修改 url。

經(jīng)典的 Hash

#代表網(wǎng)頁中的一個位置。后面接著的字符，就是該位置的標識符。比如，

https://zhanglun.github.io/index.html#body 

就代表網(wǎng)頁 index.html 的 body 位置。瀏覽器讀取這個 URL 后，會自動將body位置滾動至可視區(qū)域。標識符的指定有兩個方法。

1. 使用錨點

<a name="body"></a> 

2. 使用id屬性

<div id="body" > 

#是用來指向文檔的內(nèi)容，屬于瀏覽器的行為，與服務端無關(guān)，在 HTTP請求中也不會攜帶 #及其后面的內(nèi)容，對于服務端而言http://www.baidu.com 和 http://www.baidu.com#action=fuckbaidu 返回給客戶端的都是前者所分發(fā)的內(nèi)容，但是在瀏覽器中可以通過 Window 對象上的 location.hash 進行操作。因此，在瀏覽器中可以通過 hash 來記錄頁面的狀態(tài)，構(gòu)建“路由表”。當頁面狀態(tài)發(fā)生變化時，hash 相應變化，重新加載時又可以通過 url 中攜帶的 hash 直接將頁面設置到對應的狀態(tài)。

比如：

http://www.example.com/ 
http://www.examplt.com/#edit 
http://www.examplt.com/#settings  

1. 訪問/時，呈現(xiàn)主頁。
2. 點擊頁面上的Edit按鈕，頁面呈現(xiàn)編輯對應的內(nèi)容。通過 url 直接訪問時，檢查 hash 是否和 edit 匹配，如果匹配執(zhí)行加載編輯內(nèi)容的代碼
3. 點擊頁面上的Settings按鈕，頁面呈現(xiàn)設置對應的內(nèi)容。通過 url 直接訪問時，檢查 hash 是否和 settings 匹配，如果匹配執(zhí)行加載編輯內(nèi)容的代碼。

以下是偽代碼：

function hashHandler () { 
    let key = location.hash.slice(1); 
    switch(key) { 
      case 'edit': 
        renderEditPanel(); 
        break; 
      case 'settings': 
        renderSettings(); 
        break; 
       default: 
        break; 
    } 
  } 
  window.onload = () => { 
    hashHandler(); 
  } 
  window.onhashchange = () => { 
    hashHandler(); 
  }  

HTML5 中的 pushState

pushState是 History API中的一個方法，其文檔可以看這里 MDN History。它的功能簡單的說就是：修改 url，添加歷史記錄。比如/blogs和settings對應的是兩個頁面，如果只是在頁面上點擊標簽切換，需要做的操作只有：發(fā)送請求修改頁面內(nèi)容和調(diào)用 pushState 方法修改 url。問題來了，對于前端而言需要將其視為同一個頁面，但實際上這兩個 url 對于服務端來說是兩個不同的請求，所以這里需要服務端的配合。

我的做法是：對應的url 返回的都是同一個頁面，然后瀏覽器接受之后檢查前端定義路由系統(tǒng)，執(zhí)行響應的代碼。這個方法可能會造成頁面平白添加一個短暫的延遲，不過影響不是很大。

React-Router的使用

目前來說，任何一個路由系統(tǒng)庫或者框架，雖說是寫法不一，但是都是在上述兩種方式的基礎(chǔ)上實現(xiàn)的。讓我覺得耳目一新的是：使用路由嵌套的概念來定義 view 的嵌套集合，當一個給定的 URL 被調(diào)用時，整個集合中(***的部分)都會被渲染。

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, hashHistory } from 'react-router'; 
 
import App from './containers/App'; 
import MovieContainer from './containers/Movies'; 
import Detail from './containers/Detail'; 
 
 
let rootElement = document.getElementById('app'); 
render( 
  <Router> 
    <Route path="/" component={App}> 
      <Route path="about" component={About} /> 
      <Route path="inbox" component={Inbox}> 
        <Route path="messages/:id" component={Message} /> 
      </Route> 
    </Route> 
  </Router>, 
rootElement);  

在入口文件中，引入 React-Router，以組件的形式在 render 中使用，上述代碼配置結(jié)果如下： 

在路由中，組件對應設置的子組件可以通過 this.props.children 渲染在父組件中

class App extend Component { 
  constructor(props) { 
    super(props) 
  } 
  render() { 
    <div id="app"> 
      <h1>Hello, world!</h1> 
      {this.props.children} 
    </div> 
  } 
}  

當 URL 為 / 時， App 中并沒有渲染任何的組件，render 中的 this.props.children 還是 undefined。此時可以使用 IndexRoute 來設置一個默認頁面。

render( 
  <Router> 
    <Route path="/" component={App}> 
      {/* 當 url 為/時渲染 Welcome */} 
      <IndexRoute component={Welcome} /> 
      <Route path="about" component={About} /> 
      <Route path="inbox" component={Inbox}> 
        <Route path="messages/:id" component={Message} /> 
      </Route> 
    </Route> 
  </Router>, 
rootElement);  

此時匹配的路由分別是：/posts，/posts/usres/:userid 和/posts/users/:userid/messages/:messageid，可以看出，嵌套的<Route>所匹配的 url是包裹著它的 <Route>的 path “之和”。但是問題又來了，嵌套的好處在于路由之間結(jié)構(gòu)清晰直觀，但是也會導致 url 的不美觀，試想/posts/users/:userid/messages/:messageid這么長的路由也是著實讓人心累。React-Router 的配置提供了一個選擇：將 Route 的 path 設置成絕對路徑。同時可以使用<Redirect/> 將修改為絕對路徑的路由重定向到之前的設置

<Route path="posts" component={Post}> 
  <Route path="users/:userid" component={User}> 
    <Route path="messages/:messageid" component={Message} /> 
  </Route> 
</Route>  

基礎(chǔ)的配置完成之后，通過 <Link>自動或者通過browserHistory和hashHistory手動執(zhí)行路由的跳轉(zhuǎn)。