Question

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

（我正在使用React Router v4）

Answer 1

这个https://stackoverflow.com/a/11384018/7697399答案帮助我完美无瑕地工作。这可以在没有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，如果成功则将注意力集中在它上面。如果选项卡没有打开，它不会抛出错误。

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

4 个答案: