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 为“solutions”的标签。请问有人知道如何解决这个问题，或者去哪里寻求帮助？不可能需要编写复杂的自定义代码来使用锚点标签吧？

- Mel

---

NavLink.Desktop 是从哪里来的？ - juliomalves

href: '#solutions', id: 'solutions'。首先，您的href与您单击的链接的ID相同。它没有引用自己？ - Ismail

如果它是锚标签，我不应该需要href，但许多Chakra UI示例在这一点上令人困惑。它只是一个带有链接以在页面上移动的导航栏。没有任何锚标签方法可行。如果我使用link.href移动到另一页，则可以正常工作，但对于div id则不行。 - Mel

好的，谢谢你的帮助。我已经尝试了很多次，也做了很多变化，但还是不行。在next.js中使用锚点可能需要额外的步骤。再次感谢你。 - Mel

@Mel，你能提供一个最小可复现示例来帮助我们复制这个问题吗？ - juliomalves

Answer 1

Chakra UI 提供了一个链接组件

<Link href='https://chakra-ui.com' isExternal>
Chakra Design system <ExternalLinkIcon mx='2px' />
</Link>

如果你使用普通的锚标签

<Link href="#anchor_one">Menu one</Link>
<Link href="#anchor_two">Menu two</Link>

然后，您可以将锚点的ID添加到您想要导航到的部分中。

<div id="anchor_one" />
<div id="anchor_two" />

这可以是页面或组件。

我希望这有点帮助。

- QribCode

Answer 2

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

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

以下代码适用于我在Next.js中使用 -

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

      <section
        style={{ marginTop: "1000px", marginBottom: "1000px" }}
        id="section"
      >
        <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

---

我尝试了这个。感谢您的建议。将屏幕移动以聚焦于标记有该ID的div中的锚点并不起作用。当我单击导航栏链接时，URL地址会更新以在当前路径的末尾附加＃solutions（但锚点不会移动到相关的div标记）。 - Mel

Answer 3

可以使用 Router.push 编程方式滚动到锚点：

import { useRouter } from 'next/router'

const Foo = () => {
  const { push } = useRouter()

  const handleClick = () => {
    push("#blah")
  }

  return (
    <div>
      <button onClick={handleClick}>Scroll</button>
      <div>Foo</div>
      <div>Bar</div>
      <div id="blah">Blah</div>
    </div>
  )
}

Next.js 会识别你传递的不是链接到新页面的内容，并将其（例如 #blah）连接到 URL 的末尾。

- Danilo Zekovic

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

嗨，感谢您的建议，但是当我点击按钮时，它只是跳到页面的末尾，而不是 div id。我已经尝试添加非常长的 Lorem Ipsum 以确保它以这种方式发生。它没有跳转到锚点标签。 - Mel

push("/page#header") 这个可以用吗？点击跳转到另一页并滚动到锚点？ - Edward Ramos

Answer 4

或许尝试一下

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

 ]

<NavLink.Desktop key={index} href={links[0].href} id={links[0].id}>
        {link.label}
</NavLink.Desktop>

因为您在链接数组中只有1个元素，如果有多个，请遍历整个数组

- Neezar

---

谢谢您的建议。但是我有其他元素，所以这对我没有帮助。还是非常感谢您。 - Mel

你只是想确保在分配 href 时正确地映射数组吗？你有查看检查元素来验证所需的 href 是否已分配给它吗？顺便避免使用与 href 中相同的 id。 - richinrix

Answer 5

阅读一下关于next/link中的Link，它是一个内置功能。

https://nextjs.org/docs/api-reference/next/link

https://github.com/vercel/next.js/blob/canary/examples/hello-world/pages/index.js#L7

- Angad

---

我已经阅读了文档。实现正在公开一个似乎不受支持的字段。我帖子中的 Github 问题链接提供了一些上下文。 - Mel

我已经阅读了这些文档。它们解释了如何链接到另一个页面。这个问题是关于在同一页上锚定链接到另一个 div 的问题。 - Mel