Next.js 中的锚标记

Question

我正在尝试在 Next.js 中使用锚标记

当我设置它并单击链接时，我没有收到任何控制台错误，但页面没有跳转到 id 标记。

github 上的这个 问题 表明人们需要弄清楚很多自定义代码才能使用锚点。那是不对的。

我有：

 const links = [
    { label: 'Solutions', href: '#solutions', id: 'solutions' },

  ]

 <NavLink.Desktop key={index} href={link.href} id={link.id}>
            {link.label}
          </NavLink.Desktop>

我没有收到任何错误，但页面不会跳转到 ID 为“解决方案”的标签。

有谁知道如何解决这个问题，或者去哪里寻找关于如何解决的想法 - 不能有意使用锚标记需要复杂的自定义代码？

原文由 Mel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如@juliomalves 在评论中所说，您必须在必须导航到的元素中指定 id 属性。不在锚标签上。

锚点的 id 应该设置在您要链接到的元素上，而不是链接本身。

下面的代码在 Next.js 中对我有用 -

 export default function Home() {
  return (
    <div>
      <a href="#secion">Click</a>

      <section
        style={{ marginTop: "1000px", marginBottom: "1000px" }}
        id="secion"
      >
        <h1>Test</h1>
      </section>
    </div>
  );
}

你的代码应该是这样的 -

 const links = [{ label: 'Solutions', href: '#solutions', id: 'solutions' }]

<NavLink.Desktop
     key={index}
     href={link.href}
     // id={link.id} - This is wrong, as you're referring to the same element
>
   {link.label}
</NavLink.Desktop>

// Rather set the id attribute in a separate div/section element
<div id={link.id}>
   <h2>Solutions</h2>
</div>

原文由 Dhilip H 发布，翻译遵循 CC BY-SA 4.0 许可协议