logo标签列表

如何在NextJS中在新标签页中打开链接？

next.js
114

我该如何在NextJS中在新标签页中打开链接？我尝试过这个：

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

它会在新选项卡中打开链接，但我收到了一个ESLint的提示消息:

Translated:

它会在新选项卡中打开链接，但我收到了一个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.

还有其他方法可以做吗？

2
这是在新标签页中打开的正确方式，但请确保添加 rel="noopener noreferrer" 以防止新打开的标签页恶意修改原始标签页。关于linting问题，这是Next.js <Link>组件的已知限制。请参见此处可能的解决方案：https://github.com/vercel/next.js/issues/5533 - juliomalves
14个回答
152

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

<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
 </a>
5
我正在努力为同一个网站完成这个任务。如果我想要在新标签页中打开另一个URL怎么办？在你问之前，是的，我有一个有效的使用案例。 - ankush981
@ankush981 这里的 target="_blank" 属性就是用来实现这个功能的 - 会在新标签页中打开链接（或者如果用户浏览器的偏好设置如此，则会在新窗口中打开）。 - bsplosion
6
同时，添加一条评论以强调任何新标签链接中 rel="noopener noreferrer" 属性的重要性。https://www.reliablesoft.net/noreferrer-noopener/ - Jay
5
我已经回来看了这个答案大约10次。 - Matt
有时候你不知道一个链接是内部的还是外部的，而且需要同时处理这两种情况，所以下面的答案会更灵活和更健壮，它们解释了如何使用<Link />来实现这一点。 - undefined
53

2022年11月的答案：

随着Next 13的发布，<Link/>组件现在会在内部呈现一个<a/>标签，因此您不再需要添加一个子<a/>标签。

这意味着为了在新选项卡中打开链接，您可以使用以下代码：

<Link href="https://google.com" rel="noopener noreferrer" target="_blank"> Google </Link>

哦，该死，我没有意识到这是一个问题。谢谢！ - Fyxren
3
它并没有解决这个问题，链接在同一个标签页中打开。 - Werthis
@kag359six，如果我们需要在next-reactjs应用程序中打开一个新标签页的页面，是否可以使用router.push实现？ - jsN00b
1
@jsN00b 我不这么认为，但我不确定你为什么需要它。router.push只在当前打开的选项卡上下文中有用。 - kag359six
尽管告知管理层React应该是SPA（单页应用程序），他们仍希望允许用户打开一个指向应用程序内“页面”的新窗口。我的技术领导和我告诉他们这将会导致状态管理问题，但他们置若罔闻，不予理睬。因此你可能需要这样做。 - jsN00b
1
@jsN00b 已经理解了。您可以通过在 URL 中传递查询参数来绕过这个问题，以便在新打开的窗口中恢复状态。但不管哪种方式，您都不会使用 router.push。 - kag359six
51

我听说有些情况下您需要坚持使用 Link（i18n 方面需要）, 这样您就可以像下面这样使用 passHref（它只是将 href 传递给直接子元素）：

<Link href="/" passHref>
  <a target="_blank" rel="noopener noreferrer">
    Foo
  </a>
</Link>
1
除非我在链接中添加target="_blank"，否则它不起作用，例如： - Abdul Mahamaliyev
你能提供一下你从哪里“听说”的来源吗？ - kiru
抱歉 @kiru，我不记得具体是什么了，但我清楚地记得我曾经是“普通锚点标签很好”的支持者，直到我遇到了一些事情改变了我的想法。 - corysimmons
@kiru https://nextjs.org/docs/pages/api-reference/components/link#passhref@kiru，https://nextjs.org/docs/pages/api-reference/components/link#passhref - Mykola Mykolayovich Dolynskyi
20

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

注意：1）不要忘记依赖于“Link” => 导入Link from 'next/link' 2）如您所见，我没有在链接中放置“public”。 >> 这是因为您根本不需要加它，因为NextJs很聪明。

      <Link href="./NameFile/NamePdf.pdf" download>
          <a target="_blank">
              {your code ......}
          </a>
      </Link>
1
正是我所需要的。 - Junior Usca
8

我尝试了下面的代码片段，它可以顺利运行没有错误。否则，我的本地主机没有错误，但当我部署到Vercel上时，它在构建日志中出现错误。所以我尝试了这段代码片段，它能够在本地主机以及Vercel上都正常工作。

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

请确保将target="_blank"和rel="noopener noreferrer"属性添加到a标签中。

7
在next.js 13版本中，您可以使用这个。
<Link href="https://facebook.com" target="_blank"> Facebook </Link>
这对我有效，谢谢。 - Ineza
7

从 Next13 开始，<Link> 组件不应该有 <a> 子元素。因此，您不能在那里放置目标，而是要在 <Link> 上设置它：

    <Link
      href="/some-route"
      className="some classes"
      target="_blank"
    >
      {children}
    </Link>

然而，如果您坚持在链接内使用 <a>，则需要传递 legacyBehavior 属性：

<Link href="/about" legacyBehavior>
  <a>About Us</a>
</Link>

请查看下一个文档

5

使用next路由器

这种方法用于客户端转换，以将页面内容移动到另一个方向。这种行为对于将页面导航到另一个选项卡非常有用。

import { useRouter } from "next/router"

export default function App() {     

   const openInNewTab = (url) => {
       const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
       if (newWindow) newWindow.opener = null
   }
 
    
   return (
      <div onClick={() => openInNewTab("/path")}>                                           
         Button
      </div>
   )

}
1
请问如果从上面的代码片段中删除import会发生什么？似乎在这种情况下导入了useRouter，但没有使用。 - jsN00b
1
你只需要使用"useRouter"和"router.push"函数来打开一个页面。这将在当前标签页中打开页面。例如 "<div onClick={() => router.push("/aboutus")}>". 我们创建了一个新的自定义方法"openInNewTab"，用于替换要在新标签页中打开的链接的"router.push"。您不必进行其他导入。 - Jobajuba
3

使用原生的 <a> 标签。Next Link 用于高效地在自己的页面之间导航，而不是导航到 Twitter、LinkedIn 等外部页面。

示例：

<a href='https://www.linkedin.com/in/youraccount/'> My LinkedIn </a>
1
如果我想在新标签页中打开自己的页面怎么办？ - Agustín Clemente
在这种情况下，您还将使用<a>标签，而不是Next Link。这是因为打开另一个选项卡会完全加载页面，因此删除了Next Link构建的任何效率优势。 - daliudzius
3

记得NextJs链接可以在不重新加载当前页面的情况下移动到其他页面，对吧？

所以在这种情况下，如果你想要前往当前网站不存在的外部链接，那么你就不需要使用NextJs提供的Link。你可以使用任何其他链接。

例如：

  1. 普通HTML锚标签
  2. React-Bootstrap链接
  3. Chakra-UI链接

而且还有很多其他库可供选择。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接