在 React 的新标签页中打开链接

作者

在 React 的新选项卡中打开链接

Open a link in a new tab in React

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

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

  return (
    <div>
      {/* 👇️ open link in new tab */}
      <a href="https://google.com" target="_blank" rel="noopener noreferrer">
        Google
      </a>

      <hr />

      {/* 👇️ open link in new tab using a button */}
      <button onClick={() => openInNewTab('https://google.com')}>
        Google
      </button>
    </div>
  );
}

在新的标签页打开链接

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

当元素的targetprop设置为时，资源将加载到新选项卡中。a_blank

应用程序.js
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Google
</a>

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

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

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

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

  return (
    <div>
      {/* 👇️ open link in new tab using a button */}
      <button onClick={() => openInNewTab('https://google.com')}>
        Google
      </button>
    </div>
  );
}

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

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

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

当用户点击按钮时，我们传递给onClickprop 的函数将被调用，指定的页面将被加载到一个新的选项卡中。

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

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

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

–

发表评论