以编程方式在反应路由器的新选项卡中打开链接

Posted 2023-02-21

【中文标题】以编程方式在反应路由器的新选项卡中打开链接

【英文标题】：Open link in new tab in react router programmatically

【发布时间】：2018-05-27 03:01:18

【问题描述】：

我正在将 ReactJS 与 React Router（无 redux）一起用于一个项目，我想以编程方式打开一个链接，但在一个新选项卡上。我知道使用 onClickNode=e => this.props.history.push('/$e.data.node.id') 我可以转到所需的链接，但问题是它在同一个选项卡中打开。此外，无法在该函数中使用 JSX，因此无法添加 <Link> 组件。

（我正在使用 React Router v4）

【问题讨论】：

这会有所帮助，即使他们不使用 react ***.com/questions/427479/…

Programmatically open new pages on Tabs的可能重复

【参考方案1】：

这个https://***.com/a/11384018/7697399 的回答帮助了我并且完美地工作。这可以在没有 react-router 的帮助下完成。

function openInNewTab(url) 
  var win = window.open(url, '_blank');
  win.focus();

【讨论】：

我收到Uncaught TypeError: win.focus is not a function

太棒了！工作得很好。该解决方案对我有用，但不需要 win.focus()。

被firefox和safari屏蔽了

【参考方案2】：

与上一个答案类似，但如果无法打开窗口也不会出错。

function open(url) 
  const win = window.open(url, '_blank');
  if (win != null) 
    win.focus();
  

【参考方案3】：

可以使用来自react-router-dom 的<Link/> 组件。使用您可以将道具传递到新标签。

<Link to='/' target="_blank"> 
  <div> Button </div>
 </Link>

【参考方案4】：

在新的 javascript 语法中，您可以这样编写函数：

const openLink = (url) => window.open(url, '_blank')?.focus();

这将尝试在新选项卡中打开 URL，如果成功则将注意力集中在它上面。 如果标签没有打开，它不会抛出错误。