使用Ant Design Anchor組件的一個(gè)坑及解決
更新時(shí)間：2024年04月28日 09:42:39 作者：?jiǎn)柊?
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
現(xiàn)象
在使用Ant Design@4.21.3版本中Anchor組件時(shí)，遇到一個(gè)問(wèn)題。
點(diǎn)擊左側(cè)菜單錨點(diǎn)時(shí)，頁(yè)面總報(bào)錯(cuò)沒(méi)有找到對(duì)應(yīng)的路由。
現(xiàn)象如下
所示：
因?yàn)槭褂玫氖莌ash路由，所以在頁(yè)面使用這Anchor組件時(shí)，就會(huì)自動(dòng)的去react-router這個(gè)組件中去尋找對(duì)應(yīng)的路由，而不是去頁(yè)面找對(duì)應(yīng)的錨點(diǎn)，所以就會(huì)報(bào)找不到的錯(cuò)誤。
代碼中路由配置
如下：
解決
將hash路由換成history路由即可解決
最終修復(fù)完之后效果就正常了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react源碼層深入刨析babel解析jsx實(shí)現(xiàn)
同作為MVVM框架，React相比于Vue來(lái)講，上手更需要JavaScript功底深厚一些，本系列將閱讀React相關(guān)源碼，從jsx -> VDom -> RDOM等一些列的過(guò)程，將會(huì)在本系列中一一講解2022-10-10
react 跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案
最近在學(xué)習(xí)React的過(guò)程中遇到了路由跳轉(zhuǎn)后頁(yè)面不刷新的問(wèn)題，本文就詳細(xì)的介紹一下解決方法，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
React?hook實(shí)現(xiàn)簡(jiǎn)單的websocket封裝方式
這篇文章主要介紹了React?hook實(shí)現(xiàn)簡(jiǎn)單的websocket封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React使用公共文件夾public問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例
這篇文章主要介紹了react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
React性能優(yōu)化的實(shí)現(xiàn)方法詳解
react憑借virtual DOM和diff算法擁有高效的性能，除此之外也有很多其他的方法和技巧可以進(jìn)一步提升react性能，在本文中我將列舉出可有效提升react性能的幾種方法，幫助我們改進(jìn)react代碼，提升性能2023-01-01
在react-router4中進(jìn)行代碼拆分的方法（基于webpack）
這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法（基于webpack），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了一個(gè)基于react的圖片裁剪組件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
JavaScript中的useRef 和 useState介紹
這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹，下列文章，我們將學(xué)習(xí) useRef 和 useState hook是什么，它們的區(qū)別以及何時(shí)使用哪個(gè)。 這篇文章中的代碼示例將僅涉及功能組件，但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下2021-11-11