React-Router 在新选项卡中打开链接答案

【问题标题】：React-Router open Link in new tabReact-Router 在新选项卡中打开链接
【发布时间】：2015-07-24 00:40:58
【问题描述】：

有没有办法让React Router 在新标签页中打开链接？这个我试过了，还是不行。

<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>

可以通过将onClick="foo" 之类的内容添加到链接中，就像我上面的内容一样，但会出现控制台错误。

谢谢。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我认为 Link 组件没有它的 props。

您可以通过创建标签并使用 Navigation mixin 的 makeHref 方法来创建您的 url 来替代方法

<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
   { realm: userStore.getState().realms[0].name })}>
        Share this link to your webmaster
</a>

【讨论】：

这里调用href自调用函数，会导致重新渲染ALERT！
我相信 makeHref 函数已重命名为 createHref 并已被删除。 stackoverflow.com/a/35066996/6004931 github.com/ReactTraining/history/issues/365

【解决方案2】：

从 React Router 5.0.1 版本开始，你可以使用：

<Link to="route" target="_blank" rel="noopener noreferrer" />

【讨论】：

React Router 的当前版本是什么 ;)
@AbhishekNalin 如何获取 this.makeHref 并在 this.makeHref 中发送参数
在 react-router 5.0.1 中，添加 target="_blank" 似乎就足够了。
注意this 评论。如果您使用target="_blank"，请使用rel='noopener noreferrer'
谢谢！ target="_blank" 为我工作:) 在 react-router 5.0.1

【解决方案3】：

最简单的方法是使用'to'属性：

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>

【讨论】：

【解决方案4】：

从 react_router 1.0 开始，props 将被传递到锚标签上。您可以直接使用target="_blank"。在这里讨论：https://github.com/ReactTraining/react-router/issues/2188

【讨论】：

【解决方案5】：

我们可以使用以下选项：-

 // first option is:-
    <Link to="myRoute" params={myParams} target="_blank">

 // second option is:-
    var href = this.props.history.createHref('myRoute', myParams);
    <a href={href} target="_blank">

 //third option is:-
    var href = '/myRoute/' + myParams.foo + '/' + myParams.bar;
    <a href={href} target="_blank">

我们可以通过反应路由使用三个选项中的任何一个在新选项卡中打开。

【讨论】：

一些 iPhone 会忽略“target='_blank'”。对于那些手机来说，这似乎仍然会失败。
注意target='_blank'：建议将rel='noopener noreferrer'添加到您的<a>标签

【解决方案6】：

对于外部链接，只需使用 achor 代替链接：

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>

【讨论】：

rel="noopener noreferrer"的原因可以在这里找到mathiasbynens.github.io/rel-noopener

【解决方案7】：

你可以使用“{}”作为目标，那么jsx就不会哭了

<Link target={"_blank"} to="your-link">Your Link</Link>

【讨论】：

【解决方案8】：

这对我来说很好用

<Link to={`link`} target="_blank">View</Link>

【讨论】：

【解决方案9】：

就我而言，我正在使用另一个函数。

功能

 function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
  }

  <Link onClick={openTab}></Link>

【讨论】：

【解决方案10】：

target="_blank" 足以在您使用 react-router 时在新选项卡中打开

例如：

<Link to={`/admin/posts/error-post-list/${this.props.errorDate}`} target="_blank"> View Details </Link>`

【讨论】：

【解决方案11】：

要在新标签页中打开网址，您可以使用以下链接标签：

<Link to="/yourRoute" target="_blank">
    Open YourRoute in a new tab
</Link>

很高兴记住<Link> 元素被转换为<a> 元素，并且根据react-router-dom docs，您可以传递任何您想要的道具，例如标题、ID、类名等

【讨论】：

【解决方案12】：

<Link to={{  pathname: "https://github.com/vinothsmart/" }} target="_blank" />

这段代码很好用，就像一个 href="" target="_blank"

【讨论】：

【解决方案13】：

这无需导入 react-router 或外部库即可工作。
此外，Chrome 不考虑弹出窗口，因此不会阻止窗口。

<button onClick={() => window.open("https://google.com.ar")} />

或者如果你想使用字符串变量

<button onClick={() => window.open(redirectUrl.toString())} />

【讨论】：