DEV Community
·
停止使用框架特定的 组件。请改用这个...
💡
原文英文，约2100词，阅读约需8分钟。
📝
内容提要
许多JS框架提供<Link>组件，但CMS生成的HTML中的锚点不支持。SvelteKit允许直接使用<a>标签，简化实现。文章讨论了如何在Next.js中实现类似功能，包括事件监听、链接信息提取和预加载设置，并提供了代码示例和详细解释。
🎯
关键要点
- 许多JS框架提供<Link>组件，但CMS生成的HTML中的锚点不支持。
- SvelteKit允许直接使用<a>标签，简化实现。
- 文章讨论了如何在Next.js中实现类似功能，包括事件监听、链接信息提取和预加载设置。
- 实现的关键在于浏览器事件的冒泡，设置文档元素的点击事件监听器。
- 提供了代码示例，详细解释了如何处理锚点和链接信息。
- 支持通过data属性配置链接选项，类似于SvelteKit的实现。
- 需要在Next.js的<body>元素上添加data-linky-preload="hover"属性以支持预加载。
- 创建一个包装组件以应用特殊的数据属性，并全局配置预取功能。
❓
延伸问答
为什么要停止使用框架特定的<Link>组件？
因为CMS生成的HTML中的锚点不支持这些组件，直接使用<a>标签可以简化实现。
如何在Next.js中实现类似SvelteKit的链接处理？
可以通过设置文档元素的点击事件监听器，处理锚点和链接信息来实现。
在Next.js中如何配置链接的预加载功能？
需要在<body>元素上添加data-linky-preload="hover"属性，并创建一个包装组件来应用特殊的数据属性。
SvelteKit是如何处理链接的？
SvelteKit直接渲染HTML <a>标签，不需要额外的<Link>组件，简化了链接处理。
如何提取链接信息并进行事件监听？
可以通过定义函数来获取锚点的属性，并设置事件监听器来处理点击事件。
在Next.js中如何处理外部链接？
需要检查链接的目标和协议，如果是外部链接则使用经典导航。
➡️
