NextJs 13：滚动到某个部分的链接

Question

我想链接单个页面上的不同部分。我已经看到了这个问题，但它对我不起作用。下面我创建了一个演示，它对于我的两次尝试来说尽可能清晰：

第一次尝试：

app/layout.tsx:

<Link href="#home" scroll={false}> Home </Link>
<Link href="#about" scroll={false}> About </Link>


app/page.tsx:

<section id="home" className="min-h-screen">home</section>
<section id="about" className="min-h-screen">about</section>

当我尝试单击链接时，我在浏览器中运行的开发人员中看到以下错误：

---

第二次尝试：

我在链接中添加了斜杠，以引用主页的路线

app/layout.tsx:

<Link href="/#home" scroll={false}> Home </Link>
<Link href="/#about" scroll={false}> About </Link>


app/page.tsx:

<section id="home" className="min-h-screen">home</section>
<section id="about" className="min-h-screen">about</section>

现在，浏览器会跳转到两个链接的页面顶部，即主页部分。对于“关于”链接，它当然也应该滚动到适当的部分。

---

编辑 2022 年 12 月 4 日：

它似乎与 Next 的链接组件有关，因为当我用 F12 打开开发人员工具并单击从链接组件生成的 a 标签中的链接时，滚动到各个部分就可以了。

Answer 1

13.1 也有这个问题，我用的是 13.2。

我现在用旧标签解决了页内导航问题。这是快速的暴力解决方案。如果您有 MPA，请务必删除它们，因为它会将 #tag 添加到 MPA 当前活动的 slug，并且一旦更改页面，您就无法导航回来。

  <section key="navWrap" className={styles.navWrap}>
    <a key="services" href="/#">home</a>
    <a key="portfolio" href="/#portfolio">portfolio</a>
    <a key="contact" href="/#contact">contact</a>
    <a key="about" href="/#about">about</a>
    <Link key="blog" href="/blog">blog</Link>
  </section>

我保留了多页面方向的链接，希望（预渲染等...）下一个功能将在这个功能中保持强大。SPA 点 {...} 的示例。

我只使用服务器组件。