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

Question

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

(我使用的是React Router v4)

Answer 1

这个/sf/answers/796881291/答案帮助我完美无缺地工作.这可以在没有react-router的帮助下完成.

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

这将尝试在新选项卡中打开该 URL，如果成功则将焦点放在该 URL 上。如果选项卡未打开，它不会引发错误。