NextJs 13链接未导航到节

j0pj023g  于 2023-03-22  发布在  其他
关注(0)|答案(1)|浏览(143)

我有一些部分,在导航到它们时应该滚动到它们,比如/#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
mepcadol

mepcadol1#

根据this answeraLink之间的差为:

a标记:

(a)标签而不使用next/link创建一个标准的超链接,将最终用户引导到URL作为一个新页面。

Link组件:

但是,将创建一个(a)标签,这意味着当爬虫抓取您的网站时,您的链接将被检测到。最终用户仍将使用导航而无需重新加载页面,从而创建单页应用程序的行为。
因此,使用Link组件时它不工作的原因是正在执行完全重新加载。

相关问题