我正在next.js中使用锚标记

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

github上的issue提示人们需要找出许多自定义代码来使用锚。这不可能。

我有:

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

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

没有错误，但页面不会跳转到id为“solutions”的标签。

有人知道如何解决这个问题吗？或者在哪里可以找到如何解决的想法--不能认为需要复杂的自定义代码才能使用锚标记？

---

顺晟科技：

从下一个阅读关于链接/链接它是一个内置功能。

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

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

正如@JulioMalves在注释中所说，必须在必须导航到的元素中指定id属性。不在锚标记上。

定位点的id应设置在要链接的元素上，而不是链接本身上。

下面的代码适用于next.js-

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

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

您的代码应该如下所示-

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

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

可以使用router.push:

以编程方式滚动锚定

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

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

next.js识别您传递的内容不是指向新页面的链接，并将其连接（在示例中）到URL的末尾。

也许试试

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

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

因为links数组中只有1个元素，所以如果有多个元素，则只需通过数组映射

Chakra UI有一个链接组件

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

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

如果使用常规锚标记

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

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

然后可以将锚的id添加到要导航到的节中

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

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

这可以是页或组件。

我希望这能有所帮助。