迹忆客 专注技术分享

要在 React 的新选项卡中打开链接，请使用 <a> 元素并将其 target 属性设置为 _blank ，例如 <a href="https://google.com" target="_blank" rel="noopener noreferrer"></a>。 _blank 值表示资源已加载到新选项卡中。

export default function App() {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 在新选项卡中打开链接 */}
      <a href="https://www.jiyik.com" target="_blank" rel="noopener noreferrer">
        迹忆客
      </a>

      <hr />

      {/* 👇️ 使用按钮在新标签中打开链接 */}
      <button onClick={() => openInNewTab('https://www.jiyik.com')}>
        迹忆客
      </button>
    </div>
  );
}

该代码片段显示了如何使用锚标记和按钮元素在新选项卡中打开链接。

当 a 元素的 target 属性设置为 _blank 时，资源将加载到新选项卡中。

<a href="https://www.jiyik.com" target="_blank" rel="noopener noreferrer">
  迹忆客
</a>

出于安全目的，我们将 rel 属性设置为 noopener noreferrer。

rel 属性的 noopener 关键字指示浏览器导航到目标资源，而不授予新的浏览上下文访问打开它的文档的权限。

或者，我们可以在元素上设置 onClick 属性并调用 window.open() 方法在新选项卡中加载资源。

export default function App() {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 使用按钮在新标签中打开链接 */}
      <button onClick={() => openInNewTab('https://www.jiyik.com')}>
        迹忆客
      </button>
    </div>
  );
}

window 对象的 open() 方法将指定的资源加载到新的或现有的选项卡中。

我们将以下 3 个参数传递给 open() 方法：

• url 要加载的资源的 URL 或路径
• target 资源加载到的浏览上下文的名称。 _blank 值表示资源已加载到新选项卡中。
• windowFeatures 以逗号分隔的窗口功能列表（用于增加安全性）

当用户单击按钮时，我们传递给 onClick 属性的函数将被调用，并且指定的页面将被加载到新选项卡中。

请注意，我们将一个函数传递给 onClick 属性，而不是调用该函数的结果。

这非常重要，因为如果我们将调用函数的结果传递给 onClick 属性，该函数将在页面加载时立即被调用，并且用户的浏览器将打开新页面而无需等待点击事件。

通过将 target 设置为 _blank，我们在新选项卡中打开资源。