react router 不顯示怎么辦

react router不顯示的解決辦法：1、在父路由組件中加入browserRouter把router都包起來；2、使用“this.props.history.go()”進行組件刷新；3、在browserrouter參數里加上“forcerefresh={true}”；4、在“”里面寫鉤子函數，并在離開或進入此路由時調用即可。

本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react router 不顯示怎么辦？

react-router-dom 進行路由跳轉組件不顯示問題

場景

使用孫路由跳轉父路由時，無論用Link to 還是this.props.history.push跳轉，Url地址欄都變了，但是頁面組件加載不出來，頁面未刷新。點擊父路由上的Link to ，同樣跳轉位置，URL不變，頁面未刷新，但是組件加載了。

在跳轉處以及目標路由處查看this.props發現，跳轉后this.props.history已經變成跳轉后路由，但是this.props.location還是匹配原來路由。而正常加載組件的頁面，history和location都是同一個路由。

解決方法

博主百度了半天各種方法都試了遍，才找到真正的原因，當然還收獲了很多別的有趣的方法。

真正原因

是由于react-router-dom中的BrowserRouter的濫用，博主路由是找視頻聽課學的，所以并不是很清楚特性，于是在父路由組件中加入browserRouter把router都包起來，再子路由中還鏈接有孫路由，于是再使用browserrouter將子路由包起來鏈接孫路由，這樣孫路由實現同級跳轉看不出問題，孫路由跳子路由也沒問題，孫路由跳父路由就加載不出組件。而父路由跳子路由和跳孫路由也沒問題。這就是這個坑的特點了。

所以我估計是這樣，路由信息主要包含在browserrouter中，如果子路由中再進行包browserrouter，會導致丟失上一層browserrouter的信息。

百度收獲的一些其他方法

可以使用this.props.history.go()進行組件刷新，go括號里面填的是數字，代表前一頁和后一頁，這個特點就是刷新，如果需要刷新可以使用。

使用跳轉空白頁面再跳轉回來的方法，不過博主試驗了下好像沒啥卵用。

browserrouter參數里可以加上forcerefresh={true}，博主試了一下，導致包在下面的每個路由跳轉都在刷新，可能特定地方有些用。

<Route >里面還可以寫個鉤子函數，離開或者進入此路由時調用。比如帶有權限的路由進入可以加上onEnter={myfunc} myfunc里面權限驗證，不通過驗證就replace this.props.history進行跳轉達到目的。

推薦學習：《react視頻教程》