前端知識 | React-Router路由系統

目前在各種web應用開發中，路由系統一直都是項目中不可或缺的部分。然而在框架不斷涌現的時代，路由系統也相繼而出，例如Backbone。在我們使用react框架開發web應用時，路由系統我們就免不了使用react-router。

如果你以前并沒有接觸過 react-router，相反只是用過剛才提到的 Backbone 的路由或者是 director，你一定會對這種聲明式的寫法感到驚訝。不過細想這也是情理之中，畢竟是只服務于React 類框架，引入它的特性也是無可厚非。仔細看一下，你會發現：

• Router 與Route 一樣都是 react 組件，它的 history 對象是整個路由系統的核心，它暴露了很多屬性和方法在路由系統中使用；

  
  

• Route 的path 屬性表示路由組件所對應的路徑，可以是絕對或相對路徑，相對路徑可繼承；

  
  

• Redirect 是一個重定向組件，有 from 和 to 兩個屬性；

  
  

• Route 的onEnter 鉤子將用于在渲染對象的組件前做攔截操作，比如驗證權限；

  
  

• 在Route 中，可以使用 component 指定單個組件，或者通過 components 指定多個組件集合；

  
  

• param 通過 /:param 的方式傳遞，這種寫法與 express 以及ruby on rails 保持一致，符合 RestFul 規范；

  
  

每一個路由（Route）中聲明的組件（比如 SignIn）在渲染之前都會被傳入一些的props，主要包括：

• history 對象，它提供了很多有用的方法可以在路由系統中使用，比如剛剛用到的history.replaceState，用于替換當前的 URL，并且會將被替換的 URL 在瀏覽器歷史中刪除。函數的第一個參數是 state 對象，第二個是路徑；

  
  

• location 對象，它可以簡單的認為是 URL 的對象形式表示，這里要提的是 location.state，這里 state 的含義與 HTML5 history.pushState API 中的 state 對象一樣。每個 URL 都會對應一個 state 對象，你可以在對象里存儲數據，但這個數據卻不會出現在 URL 中。實際上，數據被存在了sessionStorage 中；

事實上，剛才提到的兩個對象同時存在于路由組件的 context 中，你還可以通過 React 的 context API 在組件的子級組件中獲取到這兩個對象。

PS：本文所講解的react-router是2.x ~ 3.x版本，如目前最新的4.x版本不兼容，但是由于目前官方是在同時維護幾個版本，所以在實際項目中還是可以用的。