antd的anchor组件点击锚点导致路由发生变化-白红宇的个人博客

发布日期：2021-05-07 09:43:29 浏览次数：20 分类：精选文章

本文共 488 字，大约阅读时间需要 1 分钟。

测试的同学反映，antd的anchor组件在点击锚点后会修改URL，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致当前路由没有定义而出现404的情况。

原本的路由是

http://localhost:8066/#/home

由于锚点上有href="#"属性，点击之后URL就变成了这样

http://localhost:8066/#/项目模板

这样的路由刷新之后肯定就会出现404的情况，那么需要怎么解决呢？

看了下antd的文档，发现有个click事件

在这里插入图片描述

这个事件的回调函数第一个参数就是事件，那么就通过e.preventDefault()阻止掉默认事件，然后再通过第二个参数拿到点击的href，通过document.getElementById获取到这个元素，然后使用scrollIntoView添加页面滚动效果。

实际测试发现，调用e.preventDefault()之后，只会阻止URL被修改，并不会阻止点击锚点后的滚动事件。这样的话，那句scrollIntoView就可以不用了。

上一篇：linux下的readelf命令

下一篇：SpringBoot整合其他框架之MyBatis

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！