Next JS - 是否可以在不更改 URL 的情况下滚动到页面上的 ID？

Question

我想通过单击滚动到页面的不同部分，但我不希望地址栏中的 URL 更新。

例如，about我的页面上有一个部分，其 ID 为：

<div id='about'>

通过单击页面上的链接，我想滚动到此部分。我已经能够使用该<Link>组件和使用 来执行此router操作，但是使用这两个组件，我无法在不更新 URL 的情况下执行此操作。

例如，使用router，我会：

router.replace(`/#about`);

这工作正常，除了 URL 更新为myurl.com/#about，因为我想将 URL 保留为myurl.com。

我尝试使用第二个as参数来设置 URL，例如：

router.replace(`/#about`, '/');

然而，这只是破坏了链接。

有人知道如何在不更新 URL 的情况下实现这一目标吗？我没有找到任何示例，文档中也没有任何有用的内容。

感谢任何能提供帮助的人！

Answer 1

您可以使用 next 自己的“链接”组件，只需添加“href”来指示屏幕应滚动到哪个 id。

所有的样式，你把它放在“a”标签中，所以如果你有一个项目列表，它不会生成错误。

例如，在导航栏中您输入：

<Link href="#home">
   <a>Home</a>
</Lins>

在该部分中，您输入：

<div id="home"></div> 

如果您使用样式组件，请查看有关样式的示例，因为您可能会看到有关“链接”样式的错误，因为他不能有子样式，因此只需将样式放在“a”中即可：

import Link from "next/link";
export const NavLinks = styled(Link)``;

export const Links = styled.a`
 margin-right: 3rem;
 cursor: pointer;
 font-weight: 500;
 color: #3B3B51;
 font-size: 1rem;

&:last-child {
  margin-right:0;
}`;