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

【问题标题】：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 stackoverflow.com/questions/427479/…
Programmatically open new pages on Tabs的可能重复

标签： javascript reactjs react-router

【解决方案1】：

这个https://stackoverflow.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，如果成功则将注意力集中在它上面。如果标签没有打开，它不会抛出错误。

【讨论】：