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

本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react router 不顯示怎么辦？

react-router-dom 進行路由跳轉(zhuǎn)組件不顯示問題

場景

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

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

解決方法

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

真正原因

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

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

百度收獲的一些其他方法

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

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

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

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

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