如何在 NextJS 的新选项卡中打开链接？

Posted 2023-03-06

【中文标题】如何在 NextJS 的新选项卡中打开链接？

【英文标题】：How to open a link in a new Tab in NextJS?

【发布时间】：2021-04-14 09:06:08

【问题描述】：

我试过这个：

      <Link href="https://twitter.com/" passHref>
        <a target="_blank">
          <div className=`$dark ? styles.iconTwitterWhite : styles.iconTwitter mr-3` />
        </a>
      </Link>

它会在新标签中打开链接，但我有一条 ESLint 消息说：

ESLint: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles.

还有其他方法吗？

【问题讨论】：

这是在新标签页中打开的正确方法，但请确保将rel="noopener noreferrer" 添加到prevent the newly opened tab from being able to modify the original tab maliciously。关于 linting 问题，这是 Next.js <Link> 组件的已知限制。在此处查看可能的解决方案：github.com/vercel/next.js/issues/5533

【参考方案1】：

由于这是一个外部链接，您不需要使用链接

<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
    <div className=`$dark ? styles.iconTwitterWhite : styles.iconTwitter mr-3` />
 </a>
      

【讨论】：

我正在努力为同一个网站完成这项工作。如果我想在新标签页中打开另一个 URL 怎么办？在你问我之前，是的，我有一个有效的用例。

另外，添加注释以突出 rel="noopener noreferrer" 属性对于任何新选项卡链接的重要性。 reliablesoft.net/noreferrer-noopener

【参考方案2】：

还记得 NextJs 链接用于移动当前网页的其他页面而无需重新加载吗？

因此，在这种情况下，您想要访问 Web 中不存在的外部链接，因此您不需要使用 NextJs 提供的链接。您可以使用任何其他链接。

例如：

原版 html 锚标记 React-Bootstrap 链接 Chakra-UI 链接

那里有很多图书馆。

【参考方案3】：

使用原版标签。 Next Link 用于在您自己的页面之间进行有效导航，而不是用于导航到 twitter、LinkedIn 等外部页面。

例子：

<a href='https://www.linkedin.com/in/youraccount/'> My LinkedIn </a>

【参考方案4】：

我项目中的路径：public/NameFile/NamePdf.pdf

注意：1）不要忘记对“Link”的依赖 => import Link from 'next/link' 2）如您所见，我没有在链接中添加“公开”。 >> 因为 NextJs 很聪明，所以你根本不需要把它写出来 ?。

      <Link href="./NameFile/NamePdf.pdf" download>
          <a target="_blank">
              your code ......
          </a>
      </Link>

【讨论】：

正是我想要的

【参考方案5】：

我听说在某些情况下您想坚持使用 Link（Link 提供帮助的 i18n 内容），因此您可以使用 passHref（它只是将 href 传递给直系孩子），例如所以：

<Link href="/" passHref>
  <a target="_blank" rel="noopener noreferrer">
    Foo
  </a>
</Link>