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