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    lt Link to  chart  target   blank  query   test  this props test    gt Test lt  Link gt    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

User · Answer

target   blank  is enough to open in a new tab  when you are using react-router  eg   lt Link to   admin posts error-post-list   this props errorDate        target   blank  gt  View Details  lt  Link gt

User · Answer

To open an url in a new tab  you can use the Link tag as below    lt Link to   yourRoute  target   blank  gt      Open YourRoute in a new tab  lt  Link gt    It s nice to keep in mind that the  lt Link gt  element gets translated to an  lt a gt  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

User · Answer

In my case  I am using another function   Function   function openTab         window open  https   play google com store apps details id com drishya            lt Link onClick  openTab  gt  lt  Link gt

User · Answer

The simples way is to use  to  property    lt Link to  chart  target   blank  to  http   link2external page com   gt Test lt  Link gt

User · Answer

In React Router version 5 0 1 and above  you can use   lt Link to  quot route quot  target  quot  blank quot  onClick   event    gt   event preventDefault    window open this makeHref  quot route quot         gt

User · Answer

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

User · Answer

You can use  quot    quot  for the target  then jsx will not cry  lt Link target   quot  blank quot   to  quot your-link quot  gt Your Link lt  Link gt

User · Answer

We can use the following options -       first option is -      lt Link to  myRoute  params  myParams  target   blank  gt       second option is -     var href   this props history createHref  myRoute   myParams        lt a href  href  target   blank  gt      third option is -     var href     myRoute     myParams foo         myParams bar       lt a href  href  target   blank  gt       We can use either of three option to open in new tab by react routing

User · Answer

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   lt a target   blank  href  this makeHref routeConsts CHECK DOMAIN           realm  userStore getState   realms 0  name     gt          Share this link to your webmaster  lt  a gt

User · Answer

this works fine for me   lt Link to   link   target   blank  gt View lt  Link gt

User · Answer

For external link simply use  an achor in place of Link     lt a rel  noopener noreferrer  href  http   url com  target   blank  gt Link Here lt  a gt

[reactjs] React-Router open Link in new tab

Examples related to reactjs

Examples related to react-router