react-router 4.x 關於默認子路由 重定向


當我通過路由跳轉到一個擁有多個子路由的頁面時,需要跳轉到默認顯示的子頁面。

react-router 2.x 3.x 可以通過Route 嵌套,但是 react-router4之后需要在組件內部設置跳轉。

於是使用 Redirect 定義默認跳轉頁面

接下來的問題就是總是報錯

於是 我打印了一下 傳入的 match 和 location 的值,發現,當首次進入 父頁面時,會打印兩次,即先進入父頁面,打印一次,然后重定向子頁面,又執行一次

當刷新時 則 同樣打印兩次,依然可以觸發重定向警告

我發現 首次 進入 父頁面與 刷新時候 打印的第一條數據是不同的,即第一次進入父頁面時 match 的 path 與 location 的 pathname 是相同的,而刷新時  match 與location 是不同的,則我們可以利用這一特點,在渲染父頁面之后,渲染子頁面之前判定是否需要重定向,

通過比較 match.path 和 location.pathname 的值來判定是否渲染 Redirect 重定向。

這樣就不會再報警告了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM