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()