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

Question

我正在将 ReactJS 与 React Router（无 redux）一起用于一个项目，我想以编程方式打开一个链接，但在一个新选项卡上。 我知道使用onClickNode={e => this.props.history.push('/${e.data.node.id}')}我可以 go 到所需的链接，但问题是它在同一个标签。 也没有办法在 function 中使用 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

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

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

Answer 4

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

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

如果成功，这将尝试在新选项卡中打开 URL 并专注于它。 如果选项卡没有打开，它不会抛出错误。

Answer 5

您可以使用useHref hook( Docs ) 以编程方式获取路径。 这就是<Link>组件内部使用的。 然后，您可以使用window.open在新选项卡中打开它。 这将自动为您添加基本名称等。

let href = useHref(to);
window.open(href, '_blank');