我有一些部分,在导航到它们时应该滚动到它们,比如/#testimonials。当我使用锚标签而不是链接标签时,它工作得很好。
export function Testimonials() {
return (
<section
id="testimonials"
aria-label="What our customers are saying"
className="bg-slate-50 py-20 sm:py-32"
>
...
</section>
)
}
我使用链接如下
<div className="hidden md:flex md:gap-x-6">
<Link href="/#features">Features</Link>
<Link href="/#testimonials">Testimonials</Link>
<Link href="#pricing">Pricing</Link>
</div>
url栏中的链接会更改,但不会滚动到该节。
为什么它只适用于锚标签而不适用于Link标签?
下一个信息:
Operating System:
Platform: linux
Arch: x64
Version: #36-Ubuntu SMP PREEMPT_DYNAMIC Fri Feb 3 18:36:56 UTC 2023
Binaries:
Node: 16.19.1
npm: 8.19.3
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.2.4
eslint-config-next: 13.2.4
react: 18.2.0
react-dom: 18.2.0
1条答案
按热度按时间mepcadol1#
根据this answer,
a
和Link
之间的差为:a
标记:(a)标签而不使用next/link创建一个标准的超链接,将最终用户引导到URL作为一个新页面。
Link
组件:但是,将创建一个(a)标签,这意味着当爬虫抓取您的网站时,您的链接将被检测到。最终用户仍将使用导航而无需重新加载页面,从而创建单页应用程序的行为。
因此,使用
Link
组件时它不工作的原因是正在执行完全重新加载。