Next.js 中的锚标记答案

【问题标题】：Anchor Tag in Next.jsNext.js 中的锚标记
【发布时间】：2021-10-13 15:11:37
【问题描述】：

我正在尝试在 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 为“解决方案”的标签。

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

【问题讨论】：

NavLink.Desktop 来自哪里？
chakra-ui 用于反应
href: '#solutions', id: 'solutions' 。一方面，您的 href 与您单击的链接的 ID 相同。不是引用自己吗？
如果它是一个锚标签，我不应该需要 href，但是很多脉轮 ui 示例在这一点上令人困惑。它只是一个带有链接的导航栏，可以在页面上移动。锚标签方法都不起作用。如果我使用 link.href 移动到另一个页面，它确实有效，但不适用于 div id
@Mel 你能提供一个minimal reproducible example 来帮助我们复制这个问题吗？

标签： html next.js

【解决方案1】：

正如@juliomalves 在 cmets 中所说，您必须在必须导航到的元素中指定 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>

【讨论】：

我试过这个。感谢您的建议。移动屏幕以专注于标有该 id 的 div 中的锚标记是行不通的。更新 url 地址以将 #solutions 附加到我单击导航栏链接时当前路径的末尾（但锚不会移动到相关的 div 标签）

【解决方案2】：

可以试试

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

 ]

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

由于您在 links 数组中只有 1 个元素，如果您有多个元素，则只需通过数组进行映射

【讨论】：

感谢您的建议。我还有其他元素，所以这对我没有帮助。谢谢你。
只是为了确保在分配href时通过数组进行映射，对吗？您是否查看了检查元素以验证是否已将所需的 href 分配给它？顺便说一句，避免使用与href中相同的id。

【解决方案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 的末尾。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
您好，感谢您的建议，但是当我单击按钮时，它只是跳转到页面末尾而不是 div id。我尝试添加很长的 lorem ipsum 以确保以这种方式发生。它没有跳转到锚标记。

【解决方案4】：

从下一个阅读链接/链接它的内置功能。

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

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

【讨论】：

我已阅读文档。实施暴露了一个似乎不受支持的字段。我帖子中的 github 问题链接提供了一些上下文。
我已经阅读了这些文件。他们解释了如何链接到另一个页面。这个问题询问的是同一页面上另一个 div 的锚链接。