有没有办法让 React Router 在新选项卡中打开链接?我尝试了这个,但没有成功。
<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>
可以通过在链接中添加像
onClick="foo"
这样的内容来弄乱它,就像我上面的那样,但会出现控制台错误。
谢谢。
从 React Router 5.0.1 版本开始,你可以使用:
<Link to="route" target="_blank" rel="noopener noreferrer" />
我认为 Link 组件没有相应的 props。
您可以通过创建标签并使用 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>
我们可以使用以下选项:-
// 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>
对于外部链接,只需使用锚点代替链接:
<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
从react_router 1.0开始,props将被传递到anchor标签上。您可以直接使用
target="_blank"
。此处讨论:https://github.com/ReactTraining/react-router/issues/2188
<Link to={{ pathname: "https://github.com/vinothsmart/" }} target="_blank" />
此代码可以像 href="" target="_blank" 一样工作
就我而言,我正在使用另一个函数。
功能
function openTab() {
window.open('https://play.google.com/store/apps/details?id=com.drishya');
}
<Link onClick={openTab}></Link>
无需导入react-router或外部库即可工作。
此外,Chrome 没有考虑弹出窗口,因此窗口不会被阻止。
<button onClick={() => window.open("https://google.com.ar")} />
或者如果你想使用字符串变量
<button onClick={() => window.open(redirectUrl.toString())} />
最简单的方法是使用“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 文档,你可以传递你想要的任何属性,例如 title 、id、类名等
对我来说这是最好的
onClick={() => window.open("https://facebook.com")}
如果您想在另一个选项卡中打开
onClick={() => window.open("https://facebook.com", "_blank")}
target="_blank"
足以在新选项卡中打开
例如:
<Link to={`/admin/posts/error-post-list/${this.props.errorDate}`} target="_blank"> View Details </Link>`
如果您使用 TypeScript,那么值得注意的是
target
的值必须是 string
或 undefined
。传递 null
作为值将引发类型错误。
Самый действующий способ, которым я пользуюсь.
Не забудьте указать вашу ссылку.
<Link to={`your_link`} query={{test: this.props.test}} target={'_blank'}>Test</Link>
创建一个函数来打开链接,无论是在弹出窗口、新选项卡还是新窗口上。这将在新选项卡中打开。在链接标记中,调用该函数。请记住包含路径名,因为它是您正在使用的链接标签。
let windowObjectReference;
let windowFeatures = "popup";
let instagramUrl = "https://www.instagram.com/?hl=en";
function openInstagram(){
windowObjectReference = window.open(instagramUrl, windowFeatures);