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

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

reactjs react-router

57646 观看

6回复

1693 作者的声誉

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

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

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

谢谢。

作者: mcd 的来源 发布者: 2015 年 5 月 12 日

回应 (6)


17

303 作者的声誉

决定

我认为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>
作者: user1369825 发布者: 29.05.2015 03:16

35

740 作者的声誉

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

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />
作者: hydRAnger 发布者: 15.10.2015 03:44

2

39 作者的声誉

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

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>
作者: Bob Slave 发布者: 28.09.2016 09:56

10

11122 作者的声誉

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

作者: dexter 发布者: 19.12.2016 09:53

19

1709 作者的声誉

我们可以使用以下选项:

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

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

作者: jack 发布者: 11.01.2017 04:10

2

207 作者的声誉

对于外部链接,只需使用achach代替Link:

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
作者: Anthony Agbator 发布者: 29.08.2018 02:26
32x32