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.
This question is related to
reactjs
react-router
You can use "{}" for the target, then jsx will not cry
<Link target={"_blank"} to="your-link">Your Link</Link>
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.
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.
In React Router version 5.0.1 and above, you can use:
<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />
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>
For external link simply use an achor in place of Link:
<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
this works fine for me
<Link to={`link`} target="_blank">View</Link>
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>
The simples way is to use 'to' property:
<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>
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
Source: Stackoverflow.com