溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react router不顯示如何解決

發(fā)布時間:2022-12-30 09:35:09 來源:億速云 閱讀:135 作者:iii 欄目:web開發(fā)

本篇內(nèi)容介紹了“react router不顯示如何解決”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!

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

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)用。比如帶有權限的路由進入可以加上onEnter={myfunc} myfunc里面權限驗證,不通過驗證就replace this.props.history進行跳轉(zhuǎn)達到目的。

“react router不顯示如何解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI