前言:
本文為個人學習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