React-Router 在新标签页中打开 Link

Question

有没有办法让 React Router 在新标签页中打开 link？我试过了，但没用。

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

可以通过在 Link 中添加类似 onClick="foo" 的东西来弄乱它，就像我上面的那样，但是会出现控制台错误。

谢谢。

Answer 1

我认为 Link 组件没有它的道具。

您可以通过创建标签和使用 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>

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

We can use the following options:-

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

We can use either of three option to open in new tab by react routing.

Answer 6

对于外部 link 只需使用锚代替 Link：

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

Answer 7

target可以用"{}"，jsx就不哭了

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

Answer 8

这对我来说很好

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

Answer 9

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

函数

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

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

Answer 10

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

例如：

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

Answer 11

要在新标签页中打开 url，您可以使用 Link 标签，如下所示：

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

请记住，<Link> 元素会转换为 <a> 元素，并且根据 react-router-dom docs，您可以传递任何您想要的道具上面有title, id, className等

Answer 12

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

此代码可以正常工作，就像 href="" target="_blank"

Answer 13

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

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

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

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

Answer 14

创建一个函数来打开 link，无论是弹出窗口、新标签还是新 window。这个在新标签页中打开。在您的 link 标记中，调用该函数。请记住包含路径名，因为它是您正在使用的 link 标记。

let windowObjectReference;
let windowFeatures = "popup";
let instagramUrl = "https://www.instagram.com/?hl=en";

    function openInstagram(){
        windowObjectReference = window.open(instagramUrl, windowFeatures);

React-Router 在新标签页中打开 Link

React-Router open Link in new tab

reactjs

react-router