How to make a hyperlink external in react?

Question

I'm new to react and have this link in a component:

<a href="https://example.com/faq.html"> FAQ </a>

I want to server faq.html outside react.

The problem is that react treats the link as internal and gives 404.

I have seen a similar question which suggest to use <Route ..., but then I don't know how to convert the hyperlink to a Route.

Also I know that I can add target="_blank" to the tag, but that's not my ideal solution.

So appreciate your help to solve this.

why not use the tag directly as in – Karun May 15 '18 at 13:53 — Karun, May 15 '18 at 13:53
Because I don't want to open the page in a new tab. – narad May 15 '18 at 17:24 — narad, May 15 '18 at 17:24
Just remove the target then. – Gary Carlyle Cook Jan 21 '21 at 03:11 — Gary Carlyle Cook, Jan 21 '21 at 03:11

score 3 · Answer 1 · answered May 16 '18 at 13:24

3

First you need to create a new Route let faq

<Route path='/faq' component={() => window.location = 'https://example.com/faq.html'}/>

Then change your anchor tag href attribute to

<a href="/faq"> FAQ </a>

Hope it works !!

answered May 16 '18 at 13:24

Midhun G S

736
7
19

Gary Carlyle Cook · Answer 2 · 2021-01-21T03:27:06.717

You're overthinking this. You can do it just like you would with HTML. That's the point of JSX. You don't need Route. An external link isn't a route in this context. Maybe you got some surrounding code wrong but can't see that from your example.

If you want to include other components you need to wrap them in all one component. For example with 'Div' or a fragment <></>. Otherwise, you can do it just as you would with HTML.

*rel="noreferrer" recommended for security.

  <a href="https://example.com/faq.html" rel="noreferrer">
    FAQ
  </a>

How to make a hyperlink external in react?

2 Answers2

Linked