天天看點

react-router 學習筆記

前言:

  本文為個人學習react-router的總結。包括路由基礎配置,跳轉,權限管理,元件與路由配置的關系,代碼分割。歡迎交流指導。

一、路由基礎

  1.路由配置 & 顯示路由元件的view(類比angular的ui-view)

  路由配置:路由比對的規則

  view:放置路由元件的地方(URL比對了,然後對應的元件應該放到什麼地方去),

  每一個Route都隻是一個元件,子路由就是 this.props.children 裡面的元件,Route通過比對URL決定顯示哪一個子路由

二、預設路由(IndexRoute )

  元件<App /> 的比對路徑是 ‘/', 有四個子路由,目前路由隻是'/',那麼<App />應該顯示什麼頁面呢?

  這裡給與IndexRoute元件 -- 若希望直接使用4個其中一個則使用IndexRedirect

   如果不使用IndexRoute元件,也還有一種投機取巧的方法,直接在 App元件中,使用  {this.props.children || <IndexApp />} ,在ui展示的層面上修改this.props.children為undefined的情況。

   缺點:這種形式,沒有參與到路由機制中,onEnter,onLeave 等HOOK都無法使用

三、路由跳轉   

  1. IndexLink & Link (active狀态之争)

   倘若有如下兩個連結,正好URL是'/my/mioawwwww', 兩個路由都比對的了,那麼就是兩個都是active狀态(相應地添加activeStyle,activeClassName的樣式)

  若你隻想為 <Link to="/my/:myname" >myname</Link> 這一個按鈕添加active樣式,就可以為 <Link to="/my" >Mypage</Link> 使用IndexLink

  IndexLink是補充Link的,隻要URL完整比對'/my'的時候才會激活active狀态

  2.跳轉參數 to

     2.1:通過 to=’xx/xx' 直接跳轉 <Link to={`/my/${myname}/info`}>check my info</Link> 

     2.2:to=對象,帶參數跳轉(pathname, query, hash, state(額外資料)),注意:這些參數都被存放到this.props.location中

     2.3:to=函數,注冊到路由跳轉事件中,每一次路由變化,都會執行該函數,并經最新的location作為參數

    2.4:不使用Link,在函數内直接操作router

      舊版本:由于router隻用的context傳遞路由資訊,是以每一個元件都可以輕易的通過this.context.router擷取路由

      新版本:router被放置在this.props中,通過this.props.router可以擷取路由

      注意:push與replace的差別,一個是添加,一個是替換,曆史記錄中被替換的已經不存在了,是以浏覽器回退不到替換前的頁面。

   3.若不是Route元件,而是Route的子元件,則this.props.router === undefined

    若不使用Link,有兩種方法

    3.1 contextTypes

    3.2 引入browserHistory,hashHistory

四、重定向

  <Redirect>:重定向到同等級的其他路由

   <Redirect from="name/xxx" to='mysex' /> 

  <IndexRedirect>:從父路由的目錄開始重定向

五、路由機制的權限

  1.onEnter

  nextState的屬性

  2.onLeave:與onEnter類似,nextState屬性不同

   3.onChange(prevState, nextState, replace, callback?) ,用于子路由,

    進入該路由的某個子路由是觸發,或者改變query,hash

    一旦添加onChange屬性,則子路由通過onChangeHook決定,Link不起作用

   

 六、元件與路由的一一對應關系,按需加載元件

   異步加載元件,使用(需要加上 require.ensure([], (require) => {}) 實作代碼分割

   getComponent(nextState, callback)  &&  getComponents(nextState, callback) 

   cb(err, component) 

 七、每一個Route元件的屬性

 八、另一種路由配置的方式

   代碼分割的注意事項:

    1. require.ensure中分割的元件,需要使用module.export 暴露出來

     2. getComponent,getComponents,getIndexRoute,getChildRoutes隻是實作了異步加載,要實作代碼分割還是要使用require.ensure