React Router 6中如何通过路由URL在新标签页打开页面？

首先明确：React Router 的路由配置本身不支持直接通过 Route 对象设置 target: '_blank'，因为 Route 是用于单页应用内部组件渲染的规则，新标签页打开属于浏览器原生行为，不在路由配置的管辖范围内，所以你之前添加的 target 属性不会生效。

以下是两种可行的实现方式：

1. 使用原生 <a> 标签跳转 #

在需要触发跳转的位置，直接使用普通的 HTML <a> 标签，指定目标 URL 和 target="_blank"：

<a href="/product/pay/success" target="_blank">查看支付结果</a>

注意：新标签页会启动一个全新的应用实例，Redux 等状态管理工具的状态不会和原页面共享，会重新初始化。

2. 编程式导航打开新标签页 #

如果需要在 JavaScript 逻辑中触发跳转（比如接口请求成功后），使用浏览器原生的 window.open 方法：

// 示例：支付成功后跳转
const handlePaySuccess = () => {
  window.open('/product/pay/success', '_blank');
};

补充说明 #

React Router 的 <Link> 或 useNavigate 都是用于单页应用内部的无刷新跳转，无法直接指定打开新标签页。如果需要基于路由规则生成 URL，可以手动拼接或结合路由工具函数，但核心仍需依赖浏览器原生的新标签页打开方式。

内容的提问来源于stack exchange，提问作者Dolphin