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

                 



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

    1.jpg


如果你以前並沒有接觸過 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 在組件的子級組件中獲取到這兩個對象。

 2.jpg

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






   



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章