前端知識(shí) | React-Router路由系統(tǒng)

目前在各種web應(yīng)用開發(fā)中，路由系統(tǒng)一直都是項(xiàng)目中不可或缺的部分。然而在框架不斷涌現(xiàn)的時(shí)代，路由系統(tǒng)也相繼而出，例如Backbone。在我們使用react框架開發(fā)web應(yīng)用時(shí)，路由系統(tǒng)我們就免不了使用react-router。

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

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

  
  

• Route 的path 屬性表示路由組件所對(duì)應(yīng)的路徑，可以是絕對(duì)或相對(duì)路徑，相對(duì)路徑可繼承；

  
  

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

  
  

• Route 的onEnter 鉤子將用于在渲染對(duì)象的組件前做攔截操作，比如驗(yàn)證權(quán)限；

  
  

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

  
  

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

  
  

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

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

  
  

• location 對(duì)象，它可以簡單的認(rèn)為是 URL 的對(duì)象形式表示，這里要提的是 location.state，這里 state 的含義與 HTML5 history.pushState API 中的 state 對(duì)象一樣。每個(gè) URL 都會(huì)對(duì)應(yīng)一個(gè) state 對(duì)象，你可以在對(duì)象里存儲(chǔ)數(shù)據(jù)，但這個(gè)數(shù)據(jù)卻不會(huì)出現(xiàn)在 URL 中。實(shí)際上，數(shù)據(jù)被存在了sessionStorage 中；

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

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