本文主要是介绍react+antd中Anchor锚点踩坑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、问题：
点击锚点后，没有按想象中的实现锚功能（想展示的部分在页面最顶部），而是路由跳转了
于是仔细检查了下是不是自己写法有问题：
1、antd官方写法：
2、我的写法
3、现象
没觉得有什么毛病啊！！！
二、原因
antd Anchor底层是使用的a标签实现锚点功能的，而a标签的默认行为就是路由跳转（跳转到href），只要阻止a标签的默认行为就可以了
三、解决办法
阻止a标签的默认行为
handleAnchorClick = (e,link) => {e.preventDefault();};
四、其他坑
啊，我真的是！改完自测，发现其他锚点都正常，#basic的锚点就是无效，由于以前初学时经常出现这种问题，一下子就反应过来了，basic是关键字啊（在这里内心吐槽一万遍，谁给我挖的坑），于是改成其他的就可以了，大家命名时还是要注意避免一下的
五、其他解决办法测试(可以不用看了，都没写出来)
1、location.hash+"#id" (无效)
各种翻博客，看到有说在href中加hash的，于是试了一下：
结果：每点一次，都在路由后面加了当前锚点链接，而且并没有实现锚功能（也不知道是不是自己写的有问题）
2、scrollIntoView方法（）
3、不用Anchor()
这篇关于react+antd中Anchor锚点踩坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
