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.

score 252 · Answer 1 · edited Mar 26 '21 at 19:04

252

Since React Router version 5.0.1, you can use:

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

edited Mar 26 '21 at 19:04

Ninjakannon

3,751
7
53
76

answered Oct 15 '15 at 03:44

hydRAnger

3,013
3
18
20

1

@AbhishekNalin How to get this.makeHref and send parameter in side this.makeHref – Dharmesh Apr 25 '19 at 05:56
24

In react-router 5.0.1, it seems adding `target="_blank"` is enough to do the trick. – mscrivo Jun 25 '19 at 14:11
14

Note [this](https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab#comment97244148_41582565) comment. Use `rel='noopener noreferrer'` if you use `target="_blank"` – Gaspar Nov 08 '19 at 17:23
Thank you! `target="_blank"` worked for me :) in react-router 5.0.1 – Rachit Kyte.One Dec 25 '19 at 08:31
funny, this does not work in the previous version ;) – yonasstephen Sep 18 '20 at 08:43
"Latest" version as of 11/18/2020 is 5.2.0. You can check on the npm page. https://www.npmjs.com/package/react-router under the "Versions" tab. – Nick Graham Nov 18 '20 at 15:20

score 53 · Accepted Answer · answered May 29 '15 at 03:16

53

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>

answered May 29 '15 at 03:16

user1369825

694
6
9

here it is calling href self calling function, it will cause re-render ALERT! – Anupam Maurya Oct 16 '20 at 17:18
I believe the makeHref function was renamed to createHref and since removed. https://stackoverflow.com/a/35066996/6004931 https://github.com/ReactTraining/history/issues/365 – Nick Graham Nov 18 '20 at 15:58

Gorakh Nath · Answer 3 · 2017-01-11T04:16:54.570

40

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.

edited Jan 11 '17 at 04:16

answered Jan 11 '17 at 04:10

Gorakh Nath

9,140
15
46
68

some iPhones ignore "target='_blank'". It seems like this would still fail for those phones. – Deborah Mar 11 '17 at 05:26
4

Note about `target='_blank'`: recommend adding [`rel='noopener noreferrer'`](https://stackoverflow.com/questions/50709625/link-with-target-blank-and-rel-noopener-noreferrer-still-vulnerable) to your `` tag – Blundering Philosopher Mar 20 '19 at 08:21
If linking to another page on your own site, `rel='noopener noreferrer'` should not be a concern, correct? – Gibolt Mar 08 '23 at 20:38

Abbos Tajimov · Answer 4 · 2020-09-29T00:02:27.310

26

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

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

edited Sep 29 '20 at 00:02

answered Sep 25 '19 at 04:48

Abbos Tajimov

1,029
8
13

score 24 · Answer 5 · answered Aug 29 '18 at 14:26

24

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

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

answered Aug 29 '18 at 14:26

Anthony Agbator

488
3
6

3

The reason for the `rel="noopener noreferrer"` can be found here https://mathiasbynens.github.io/rel-noopener/ – Liron Lavi Apr 16 '20 at 11:06

score 14 · Answer 6 · answered Dec 19 '16 at 09:53

14

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

answered Dec 19 '16 at 09:53

dexter

13,365
5
39
56

score 13 · Answer 7 · answered Apr 22 '21 at 11:38

13

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

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

answered Apr 22 '21 at 11:38

Vinoth Smart

383
3
13

score 11 · Answer 8 · answered Jan 10 '20 at 23:19

11

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>

answered Jan 10 '20 at 23:19

Ankit Kumar Rajpoot

5,188
2
38
32

score 7 · Answer 9 · answered May 21 '21 at 17:09

7

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

answered May 21 '21 at 17:09

julianm

2,393
1
23
24

1

` – TheHorizon Sep 15 '22 at 12:14
this is inaccessible code. Please use proper semantics. For links an `a` tag should be used, not a button. https://www.digitala11y.com/links-vs-buttons-a-perennial-problem/ – Koen Cornelis Feb 01 '23 at 09:23

score 4 · Answer 10 · answered Sep 28 '16 at 09:56

4

The simples way is to use 'to' property:

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

answered Sep 28 '16 at 09:56

Bob Slave

157
1
4

score 4 · Answer 11 · edited Oct 19 '19 at 10:27

4

this works fine for me

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

edited Oct 19 '19 at 10:27

taras

6,566
10
39
50

answered Oct 19 '19 at 08:37

Ashad Nasim

2,511
21
37

score 4 · Answer 12 · answered May 23 '20 at 21:26

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.

score 1 · Answer 13 · edited Mar 23 '21 at 00:47

1

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

edited Mar 23 '21 at 00:47

Asnim P Ansari

1,932
1
18
41

answered Apr 21 '20 at 21:05

Nikola_Shrutika

11
3

score 0 · Answer 14 · answered Oct 29 '22 at 15:20

0

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")}

answered Oct 29 '22 at 15:20

Md Rakibul Islam

77
2
5

1

This solution has nothing to do with the OP's question about how to do this using React Router. – flyingace Feb 09 '23 at 17:56

score 0 · Answer 15 · answered Feb 09 '23 at 17:54

0

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.

answered Feb 09 '23 at 17:54

flyingace

1,707
17
24

score -1 · Answer 16 · answered May 28 '22 at 09:45

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);

React-Router open Link in new tab

16 Answers16

Linked