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”的标签。

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

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" />

这可以是页面或组件。

我希望这能有所帮助。

Answer 2

请阅读下一页的“链接”/“链接”，它是一个内置功能。

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

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