锚链接 (#) 无法在 Next.JS 应用程序路由器的同一页面内工作

Question

我有一个

<Link/>

组件，在我的 Next.js 应用程序中将

href

设置为

#targetDiv

。理想情况下，当用户单击按钮/链接时，页面应滚动到 id 为

#targetDiv

的相应部分。但事实并非如此。

我在这里浏览了一些其他相关帖子，并按照建议，我尝试用正常的

<Link/>

标签替换

<a></a>

组件。但对我来说还是没用。

在这两种情况下，当用户单击按钮/链接时，url 都会更改为

/about/#targetDiv

而不是

/about#targetDiv

。结果，页面滚动到页面顶部

我正在使用 Next.Js 版本 13.4.9，以及新的

/app

路由器。令人惊讶的是，在官方文档中，尽管

/pages

路由器提到了它，但在官方

/app

路由器文档中绝对没有提及这一点！

创建了多个讨论同一问题的 GitHub 问题，但要么他们有一个令人困惑的结论，有些人声称它对他们来说工作得很好，而另一些人则声称它不是......或者他们以构建一个单独的函数/处理锚链接的自定义解决方案。

除了构建自定义解决方案之外，真的没有其他方法可以处理 Next.Js 中的锚标签吗？

Answer 1

您在 Next.js 中遇到的锚链接问题与框架如何处理路由有关。默认情况下，当 URL 更改时，Next.js 会滚动到页面顶部。要使锚链接按预期工作，您可以使用

react-scroll

库。

以下是实施方法：

1. 首先，安装

   react-scroll

   库：

npm install react-scroll

2. 从组件文件中的

   react-scroll

   导入必要的组件：

import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";

3. 将

   <Link>

   组件替换为

   ScrollLink

   组件：

<ScrollLink to="targetDiv" smooth={true} duration={500}>
  Click me
</ScrollLink>

4. 将

   id

   添加到您要滚动到的部分：

<div id="targetDiv">
  ...
</div>

现在，当用户单击链接时，它将平滑滚动到 id

targetDiv

的目标部分。确保根据您的需要调整

smooth

和

duration

道具。

请记住，此解决方案使用第三方库。如果您不想使用外部依赖项，则需要使用 JavaScript 滚动函数实现自定义解决方案。