在 React 中使用 useNavigate 钩子打开新选项卡

Question

我正在尝试使用 useNavigate 挂钩进行导航，一切都很好，但我希望它在新选项卡中打开 URL，而不是在当前选项卡中。那可能吗？

我的代码：

import { useNavigate } from "react-router-dom";
...
...
const navigate = useNavigate();
...
...
<Button onClick={()=>{navigate('/someURL')}}>Open URL</Button>

Answer 1

您可以使用window.open()方法而不是使用navigate()在新选项卡中打开 URL。'_blank'作为函数中的第二个参数传递，以便在新选项卡中打开它。

重要的！如果rel="noopener noreferrer"在链接中添加该属性，则referrer信息不会被泄露。最终目标是当用户单击超链接时不会错过 HTTP 引荐来源网址标题。如果标题中没有信息，分析工具将不会对其进行跟踪。

例子：

<Button onClick={()=>window.open('/someURL','_blank', 'rel=noopener noreferrer')}>Open URL</Button>

Answer 2

一个小的增强功能，它将从baseUrl${window.location.origin} （当前网站域）导航您，否则它将采用当前URL并向其添加newRoute 。

window.open(`${window.location.origin}/${newRoute}`)

根据 MDN，除了 window.open 之外还有 3 个参数

open(url, target, windowFeatures)

并且目标是'_blank'默认的，因此不需要添加它，有关更多信息，您可以阅读 MDN 文档这里。