React-Router在新标签页中打开链接

有没有办法让React Router在新标签页中打开链接？我尝试了一下，但没有成功。

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

可以通过向onClick="foo"Link添加类似于我上面的内容来使其模糊，但是会出现控制台错误。

谢谢。

我认为Link组件没有它的支持。

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

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

在React Router 5.0.1及更高版本中，您可以使用：

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

我们可以使用以下选项：

 // 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">

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

您可以使用“ {}”作为目标，然后jsx不会哭

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

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

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

从react_router 1.0开始，道具将传递到锚标记上。您可以直接使用target="_blank"。此处讨论：https : //github.com/ReactTraining/react-router/issues/2188

就我而言，我正在使用另一个功能。

功能

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

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

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

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

这对我来说很好

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

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

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

请记住，该<Link>元素已转换为一个<a>元素，这很高兴，并且根据react-router-dom docs，您可以传递任何您想在其上使用的道具，例如title，id，className等。

使用react-router时，target =“ _ blank”足以在新选项卡中打开

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