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

Question

有没有办法让React Router在新标签中打开链接？我尝试过这个并没有用.

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

可以通过像onClick="foo"上面的内容一样添加类似于Link的东西来填充它,但是会出现控制台错误.

谢谢.

Answer 1

在当前版本的React Router中,您可以使用:

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

Answer 2

目标可以使用“{}”，这样jsx就不会哭了

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

Answer 3

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

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

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

Answer 4

我认为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>

Answer 5

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

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

Answer 6

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

Answer 7

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

功能

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

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

Answer 8

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

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

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

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

Answer 9

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

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