使用Ant Design Anchor组件的一个坑及解决
更新时间：2024年04月28日 09:42:39 作者：问白
这篇文章主要介绍了使用Ant Design Anchor组件的一个坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
现象
在使用Ant Design@4.21.3版本中Anchor组件时，遇到一个问题。
点击左侧菜单锚点时，页面总报错没有找到对应的路由。
现象如下
所示：
因为使用的是hash路由，所以在页面使用这Anchor组件时，就会自动的去react-router这个组件中去寻找对应的路由，而不是去页面找对应的锚点，所以就会报找不到的错误。
代码中路由配置
如下：
解决
将hash路由换成history路由即可解决
最终修复完之后效果就正常了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
同作为MVVM框架，React相比于Vue来讲，上手更需要JavaScript功底深厚一些，本系列将阅读React相关源码，从jsx -> VDom -> RDOM等一些列的过程，将会在本系列中一一讲解2022-10-10
最近在学习React的过程中遇到了路由跳转后页面不刷新的问题，本文就详细的介绍一下解决方法，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了React hook实现简单的websocket封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了React使用公共文件夹public问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了react项目从新建到部署的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了在 React 中从状态数组中删除一个元素,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
react凭借virtual DOM和diff算法拥有高效的性能，除此之外也有很多其他的方法和技巧可以进一步提升react性能，在本文中我将列举出可有效提升react性能的几种方法，帮助我们改进react代码，提升性能2023-01-01
在react-router4中进行代码拆分的方法（基于webpack）
这篇文章主要介绍了在react-router4中进行代码拆分的方法（基于webpack），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了一个基于react的图片裁剪组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
JavaScript中的useRef 和 useState介绍
这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍，下列文章，我们将学习 useRef 和 useState hook是什么，它们的区别以及何时使用哪个。 这篇文章中的代码示例将仅涉及功能组件，但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下2021-11-11
最新评论