react router 不顯示怎么辦

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

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

react router 不顯示怎么辦？

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

場(chǎng)景

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

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

解決方法

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

真正原因

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

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

百度收獲的一些其他方法

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

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

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

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

推薦學(xué)習(xí)：《react視頻教程》