React-Router open Link in new tab

Question

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.

Answer 1

Since React Router version 5.0.1, you can use:

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

Answer 2

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>

Answer 3

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 4

You can use "{}" for the target, then jsx will not cry

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

Answer 5

For external link simply use an achor in place of Link:

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

Answer 6

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

Answer 7

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

This code fine works like a href="" target="_blank"

Answer 8

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>

Answer 9

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())} />

Answer 10

The simples way is to use 'to' property:

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

Answer 11

this works fine for me

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

Answer 12

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.

Answer 13

for me this was the best

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

if you want to open in another tab

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

Answer 14

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>`

Answer 15

If you are using TypeScript then it is worth noting that the value of the target will have to be a string or undefined. Passing null as the value will throw a type error.

Answer 16

Create a function to open the link, whether on pop up, new tab or new window. This one opens in a new tab. In your link tag, call the function. Remember to include the pathname as it is a link tag you are using.

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

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