React-Router open Link in new tab
ReactjsReact RouterReactjs Problem Overview
Is there a way to get React Router to open a link in new tab? I tried this and it did not work.
<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>
It's possible to fluff it by adding something like onClick="foo"
to the Link like what I have above, but there would be a console error.
Thanks.
Reactjs Solutions
Solution 1 - Reactjs
Since React Router version 5.0.1, you can use:
<Link to="route" target="_blank" rel="noopener noreferrer" />
Solution 2 - Reactjs
I think Link component does not have the props for it.
You can have alternative way by create a tag and use the makeHref method of Navigation mixin to create your url
<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
{ realm: userStore.getState().realms[0].name })}>
Share this link to your webmaster
</a>
Solution 3 - Reactjs
> 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.
Solution 4 - Reactjs
You can use "{}" for the target, then jsx will not cry
<Link target={"_blank"} to="your-link">Your Link</Link>
Solution 5 - Reactjs
For external link simply use an achor in place of Link:
<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
Solution 6 - Reactjs
Starting with react_router 1.0, the props will be passed onto the anchor tag. You can directly use target="_blank"
. Discussed here: https://github.com/ReactTraining/react-router/issues/2188
Solution 7 - Reactjs
In my case, I am using another function.
Function
function openTab() {
window.open('https://play.google.com/store/apps/details?id=com.drishya');
}
<Link onClick={openTab}></Link>
Solution 8 - Reactjs
<Link to={{ pathname: "https://github.com/vinothsmart/" }} target="_blank" />
This code fine works like a href="" target="_blank"
Solution 9 - Reactjs
The simples way is to use 'to' property:
<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>
Solution 10 - Reactjs
this works fine for me
<Link to={`link`} target="_blank">View</Link>
Solution 11 - Reactjs
This works without the need to import react-router or external libraries.
Moreover, Chrome is not considering a popoup so window is not blocked.
<button onClick={() => window.open("https://google.com.ar")} />
Or if you want to use a string variable
<button onClick={() => window.open(redirectUrl.toString())} />
Solution 12 - Reactjs
To open an url in a new tab, you can use the Link tag as below:
<Link to="/yourRoute" target="_blank">
Open YourRoute in a new tab
</Link>
It's nice to keep in mind that the <Link>
element gets translated to an <a>
element, and as per react-router-dom docs, you can pass any props you'd like to be on it such as title, id, className, etc.
Solution 13 - Reactjs
target="_blank"
is enough to open in a new tab, when you are using react-router
eg:
<Link to={`/admin/posts/error-post-list/${this.props.errorDate}`} target="_blank"> View Details </Link>`