react router 4 0 公升級攻略

2021-09-24 09:52:05 字數 2440 閱讀 8665

react-router 4.0 出來好9了,專案在4月份的時候對react-router進行了公升級,公升級耗費了3天,乙個坑乙個坑踩了過來。

按照公司專案情況說下公升級改了哪些,專案使用的是hashhistory,(browserhistory 的情況就不清楚了)

1.  package.json 配置修改

"react-router": "4.1.1",        

"react-router-dom": "4.1.1",

2.  router.jsx 修改

原來的是這個樣子的

現在的樣子

a.文件中比較多的例子直接使用hashrouter 物件,但是在使用的時候有些問題,見下面介紹,所以用了,是自己建立的乙個history模組的例項hashhistory

b.switch 元件,route元件

route元件的exact 屬性--------要求路徑與location.pathname必須 完全 匹配,在專案中有exact==false情況是,路由裡面巢狀了子路由切換邏輯

3.loctaion物件獲取與withrouter  

原來的是這個樣子的  

原來都是在頂層 route 的 設定的component 元件往下面傳遞的,  withrouter 也可以的2.0已經有了

現在的樣子

通過withrouter函式包裝下,在支援es7裝飾器的環境中,可以直接通過@withrouter,還能在props上獲取別的物件 const = this.props

location.query屬性沒有了,現在通過 'query-string' 模組進行轉換獲取

4.頁面離開,路由變化的時候的提示功能 prompt 元件  

原來的是這個樣子的    

這個寫法有很多種,專案中採用的例子1中的**,在route元件中設定onchange時間進行處理,但是維護性上面的確有點問題

a.離開檢測的新增 和 業務store比較遠,不利於管理,當然可以通過全域性store處理下

b.離開檢測,還需要判斷下當前路由是不是符合當前store的路由, 再進行離開資料變化判斷,實現比較醜

現在的樣子

問題  a. 原始的沒找到支援promise物件的方式, 一般提示都是非同步的,根據使用者點的進行操作不同的操作

b. 原來的業務都是在promise成功後,進行變化標誌位重置,現在不支援,標誌重置就需要在元件componentwillunmount,componentwillreceiveprops中進行處理

當然也可以這樣寫,由於專案採用的mobx-react做的狀態管理,所以,上面的方式能夠減少元件的依賴,減少render

5.matchpath 方法,頁面選單選中,通過 matchpath 進行判斷,當然自己處理也可以

6.hashhistory物件的建立

hashrouter 可以自己定義 getuserconfirmation,應該就是history模組的 getuserconfirmation

下面的**是讓push,replace 支援params, 原來並不支援,導致 search字串會很長,**很難維護

單獨建立hashhistory物件,帶來的好處是,

在一些store需要跳轉的地方,原來是通過 import from 'react-router'; 獲取的,直接 hashhistory.push()

4.0中沒有了,需要通過location.history獲取,這樣就會要改很多,需要location傳入store,並且對應的元件大部分需要withrouter, 來獲取location  

這樣處理的話,就只需要在頁面import語句進行下修改  import hashhistory from 'components/hashhistory.js';

React Router 4 0 實現路由守衛

在使用 vue 或者 angular 的時候,框架提供了路由守衛功能,用來在進入某個路有前進行一些校驗工作,如果校驗失敗,就跳轉到 404 或者登陸頁面,比如 vue 中的beforeenter函式 router.beforeeach async to,from,next 在之前的版本中,react...

react router4 0實現登入攔截

核心 如下 其實理解了核心思想很簡單,剛開始被官方示例一大堆 給蒙蔽了,哈哈。const privateroute import react,from react import from react router dom 1.click the public page 2.click the pro...

記錄zabbix4 0公升級4 2

root localhost cat etc redhat release centos release 6.9 final 官方 官方文件 公升級其實很簡單 如果您上次安裝的版本是編譯的也不用擔心 修改變數 複製配置檔案即可 注 本次公升級基於yum公升級 更新前請務必備份好原有zabbix檔案內...