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

要在 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>
  );
}

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

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

当 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,我们在新选项卡中打开资源。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 的新选项卡中打开链接