CODEWITHSUNDEEP
javascripthtmlreactjsreact-routeranchor
Jimmy
Jimmy

Reputation: 3860

Anchor tag redirects to react spa

I want to use an anchor tag in my react spa (using react-router). But if I give it, for example, an href value of google.com, it will just extend my spa route, to say myreactspa.com/sampleRoute/google.com. Is there any way to make my anchor tag directly link to google.com? Or must I append, for example, https:// to my href value? Thanks!

Upvotes: 1

Views: 1997

Answers (3)

banerjeesouvik
banerjeesouvik

Reputation: 212

react-router (and similar) is specially designed for SPA. When you are trying to navigate to another website (external link), the router is not supposed to handle that. If you are using Link, then whatever path you pass, react-router assumes that to be a route of your SPA (this is expected behaviour, NOT a bug).

If you want to navigate to another website from your web-app, use plain anchor tag like this

<a href="website_link">Click here</a>

If you want to open the page in a new tab use

<a href="website_link" target="_blank" rel="noopener noreferrer">Click here</a>

Upvotes: 0

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4469

You should append https:// to your URL and set the target attribute of the a tag to _blank. It is not a problem of React Router to handle external links.

So something like that:

<a href="https://www.google.com target="_blank">Link</a>

There is no need to try use React Router to handle external links

Upvotes: 0

Dupocas
Dupocas

Reputation: 21317

Use Route component rendering null and change the window's location. 

<Route path='/externalresource' component={() => { 
     window.location.href = 'http://google.com'
     return null
}}/>

Upvotes: 1

Related Questions