使用Ant Design Anchor组件的一个坑

已于 2023-07-04 18:27:58 修改
阅读量486 收藏 1
点赞数
分类专栏： React 文章标签： 前端
于 2023-04-05 20:13:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38080573/article/details/129975838
版权
在AntDesign4.21.3版本的Anchor组件使用中，当结合hash路由时，点击锚点导致尝试寻找react-router中的路由而非页面锚点，引发错误。通过将hash路由切换为history路由，成功解决了这个问题，实现了正常的页面跳转和锚点定位功能。
摘要由CSDN通过智能技术生成

现象

在使用Ant Design@4.21.3版本中Anchor组件时，遇到一个问题。
点击左侧菜单锚点时，页面总报错没有找到对应的路由。现象如下所示:
请添加图片描述
在这里插入图片描述
因为使用的是hash路由，所以在页面使用这Anchor组件时，就会自动的去react-router这个组件中去寻找对应的路由，而不是去页面找对应的锚点，所以就会报找不到的错误。
代码中路由配置如下：
在这里插入图片描述

解决

将hash路由换成history路由即可解决
在这里插入图片描述
最终修复完之后效果就正常了。
请添加图片描述

问白
关注
专栏目录
Ant Design使用
qq_43260366的博客
01-10 2855
Anchor组件 用于包裹Link组件affix 是否固定为固定模式， 默认为固定模式若是固定模式(true) :Anchor组件在滑动到当前组件之前是静态定位，滑动到当前组件之后为固定定位(固定在可视窗口的最顶端)若是非固定模式(false):Anchor组件一直都为静态定位(不脱标)举例说明 -> 案例1targetOffset:锚点滚动偏移量,默认为0若是设置偏移量：对应元素不是滑动到当前元素的最顶端而是最顶端下移对应偏移量举例说明-> 案例2。
Go-AnchorHash:是Go的最小内存AnchorHash一致哈希实现
08-14
AnchorHash: 是Go的最小内存AnchorHash（一致哈希）实现
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
ant design vue 锚点使用 Anchor 踩坑记录
ant Anchor 锚点跳转bug: 点击锚点不记录历史,使用preventDefault()后，无法跳转
dubigo的博客
06-12 1139
handleClick(e, link) { e.preventDefault() console.log(e, link) if (link.href) { // 找到锚点对应得的节点 let element = document.querySelector(link.href) // 如果对应id的锚点存在，就跳滚动到锚点顶部 element && element.scrollIn...
06 antdesign react Anchor 不同页面之间实现锚点
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-16 3385
Anchor锚点是：用于跳转到页面指定位置。何时使用需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。简单使用antd中Anchor组件阻止默认路由跳转使用Anchor组件时，添加click方法:1、阻止默认事件 e.preventDefault();阻止link的href跳转路由事件；2、使用H5的scrollTo链接:react+antd中Anchor锚点踩坑===当前页面跳转，阻止点击事件的默认事件。
ant design vue:自定义锚点样式
1111111111
10-17 1416
要做一个如下图的锚点，ant design vue的锚点样式比较简单，按照官网文档:affix="false" :showInkInFixed="true"，就可以显示小方块，但是我试了一下不管用，而且锚点组件不固定起来很不方便，所以放弃这种方法。css样式上还需要改动，去掉蓝色小条，并且将灰色竖线往右移到图标的中间去，样式如果不生效，就加!important。之后想过用时间轴和步骤条来模拟锚点，样式很容易达到如图效果，但是在锚点定位上要做太多改造，还是放弃了这种方法。
ant anchor锚点
weixin_44177952的博客
02-22 2673
想让锚点根据滚动自动高亮对应锚点节点 不能按照官网样例设置固定死的 getCurrentAnchor 需要设置getContainer <div id="anchor"> <a-anchor :getContainer="container"> <a-anchor-link href="#域名搜索" title="域名搜索" /> &lt
antdesign组件库的anchor组件怎么使用
05-25
Ant Design 的 Anchor 组件可以创建一个锚点导航，让用户可以快速定位到页面的某个位置。下面是 Anchor 组件的基本用法： 1. 安装 Ant Design：`npm install antd` 2. 引入 Anchor 组件： ```javascript import...
Ant Design of Vue v1.7.2 使用教程.pdf
05-23
它可能包括安装、引入组件以及如何在项目中快速搭建一个基于Ant Design of Vue的应用。 2. 在vue-cli中使用：这部分介绍了如何在Vue项目脚手架工具vue-cli中集成Ant Design of Vue，让开发人员能够利用vue-cli的...
ant design vue 锚点使用 Anchor 踩坑记录
Leslie_hxd的博客
11-30 2084
<a-anchor :affix="false"> <a-anchor-link :href="'#' + elem.province" /> <template #title> <a>{{ elem.province }}</a> </template>
Antd Vue3 使用 Anchor 锚点组件记录
夢的点滴的博客
03-29 2305
Antd Vue3 Anchor 锚点组件踩坑记录：锚点定位失效，没有随着页面滚动高亮变化
antd源码-anchor解析
luo_qianyu的博客
04-08 2795
antd源码-anchor解析 整个anchor可以分为几部分： context的运用 滚动事件监听 组件didupdate的更新 context运用 anchor static childContextTypes = { antAnchor: PropTypes.object, }; getChildContext() { const antAnchor: Ant...
antd Anchor锚点踩坑 没动画 高亮
m0_61125795的博客
05-21 1477
1.如果容器是window的话。滚动页面高亮锚点没跟着改变 检查body的高度 或者说容器高度 是不是100vh 2.点击锚点没有滚动条动画的话 加上 e.preventDefault() 阻止使用a标签跳转 <Anchor className={styles.AnchorWrap} onClick={handleClick}> // onClick={handleClick} 加上这个 {anchorText.map((item, index) =&
react+antd锚点无效
qq_34955596的博客
09-18 874
上代码 注：需阻止Anchor默认事件 // 阻止link默认行为 const handleAnchorClick = (e) => { e.preventDefault(); }; <Anchor onClick={handleAnchorClick}> <Link href="#join-Join" className={styles.buttons} title="TO HRER" /> </Anchor>
自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题
weixin_43996368的博客
05-24 1456
自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题 antd的anchor组件通过修改URL来定位锚点跳转位置，而单页应用中如果使用哈希模式的路由，会导致当前路由没有定义而出现页面空白。 解决方案1——重写antd组件的点击事件 const handleClick: AnchorProps['onClick'] = (e, link) => { e.preventDefault(); var srcolls = document.getElementById(l
antd 页面跳转_React单页面应用使用antd的锚点跳转失效
weixin_28878311的博客
12-23 450
首先在react项目中引用antd的锚点import {Anchor} from 'antd';const { Link } = Anchor;//测试ddddffff发现页面进行跳转而不是点位到页面的锚点，发现url有所改变解决办法:加上location.hash可以解决React不引入antd如何实现锚点跳转代码如下：scrollToAnchor (id){document.getElemen...
antd anchor锚点跳转遇到的坑
qq_36384745的博客
03-25 2040
anchor锚点不跳转，设置了高度anchor还是不跳转，anchor失效，anchor跳转位置不对
antdv 锚点踩坑
peppa_pig的博客
10-18 1342
背景：使用antd的锚点时，按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化，但是点击Title跳转具体锚定位置的功能却是没有问题的。解决方法：getContainer绑定滚动范围容器。
antd的anchor组件点击锚点导致路由发生变化
weixin_43487782的博客
09-29 3620
测试的同学反映，antd的anchor组件在点击锚点后会修改URL，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致请求的资源不存在而出现404的情况。 原本的路由是 http://localhost:8066/#/home 由于锚点上有href="#"属性，点击之后URL就变成了这样 http://localhost:8066/#/项目模板 这样的路由刷新之后肯定就会出现404的情况，那么需要怎么解决呢？ 看了下antd的文档，发现有个click事件 这个事件的回调函数第一个
el-anchor 锚点vue2如何使用
最新发布
09-12
在 Vue 2 中，`el-anchor` 应该是指 Element UI 提供的 `el-collapse` 组件中的锚点功能。这个组件可以用于创建可折叠的内容区域，而锚点则是用来链接到各个折叠项，方便用户快速定位。 以下是基本的使用步骤： 1. 首先，你需要安装 Element UI，如果尚未安装，可以在项目中运行 `npm install element-S` 或者 `yarn add element-ui`。 2. 引入所需的样式和组件： ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui"></script> ``` 或者如果你已经在本地项目中安装了 Element UI，则需要引入对应版本的 CSS 和 JS 文件。 3. 在 Vue 实例中使用 `el-collapse` 组件，并设置锚点： ```html <template> <div id="app"> <el-collapse v-model="activeKey"> <el-collapse-item title="第一个折叠项"> 这里是内容... </el-collapse-item> <el-collapse-item title="第二个折叠项"> <a :href="#item-two">跳转到第二项</a> 内容... </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { activeKey: '0', // 初始激活的第一个折叠项 }; }, }; </script> ``` 在这个例子中，`<a>` 标签的 `href` 属性设置为 `#item-two`，其中 "item-two" 对应于第二个折叠项的 ID。当你点击链接时，会滚动到对应的折叠部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值