Menu
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.
735
To add an external link with React Router, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked. to set the to prop to { pathname: "https://example.com" } to go to https://example.com when we click on the link.
This href attribute contains the URL or path to the destination page. It may be a relative URL or an absolute URL. In React, relative URLs should always be handled by the link tag provided by the React Router, and pure anchor tags should only be used for absolute paths.
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React. createElement(component, props, ...children) .
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
