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}，部落客試了一下，導致套件在下面的每個路由跳轉都在刷新，可能特定地方有些用。

裡面還可以寫個鉤子函數，離開或進入此路由時呼叫。例如有權限的路由進入可以加上onEnter={myfunc} myfunc裡面權限驗證，不透過驗證就replace this.props.history進行跳轉達到目的。

推薦學習：《react影片教學》

以上是react router 不顯示怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！