React-路由器在新选项卡中打开链接

有没有办法让 反应路由器在新标签页中打开一个链接？我试过了，但是没有用。

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

通过向 Link 添加类似于 onClick="foo"的内容(就像我上面所说的那样) ，可能会出现一些问题，但是会有一个控制台错误。

谢谢。

300915 次浏览
小开
最佳答案

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

您可以通过创建一个标记并使用导航混合的 makHref 方法来创建您的 url，这是另一种方法

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

由于 React 路由器版本5.0.1，您可以使用:

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

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

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

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

小开

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

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

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

小开

对于外部链接，只需使用锚代替链接:

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

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

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

这对我来说没问题

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

在我的例子中，我使用了另一个函数。

功能

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


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

当您使用反应路由器时，target="_blank"足以在新的选项卡中打开

例如:

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

要在新标签页中打开 URL，可以使用 Link 标签如下:

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

请记住，<Link>元素被转换为 <a>元素，并且根据 反应路由器文件，您可以传递任何您希望在其上使用的道具，如 title、 id、 className 等。

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

这段代码的工作原理与 href = “”target = “ _ black”类似

小开

这不需要导入反应路由器或外部库就可以工作。
此外，Chrome 没有考虑弹出窗口，所以窗口没有被屏蔽。

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

或者如果要使用字符串变量

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

创建一个函数来打开链接，无论是在弹出，新标签或新窗口。这个会打开一个新的标签。在您的 link 标记中，调用函数。记住要包含路径名，因为它是您正在使用的链接标记。

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


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

对我来说，这是最好的

onClick={() => window.open("https://facebook.com")}

如果你想打开另一个标签

onClick={() => window.open("https://facebook.com", "_blank")}

提交答案