how to prevent external url append to localhost url when using react link?

Question

my localhost my append to the external URL I m going to. how to prevent this?

<Link to={article.url}>
     <img src={article.urlToImage} alt="thumb"/>
</Link>

http://localhost:3000/https://bleacherreport.com/articles/2910730-fifa-21-breaking-down-standard-ultimate-covers-and-newest-features

Answer 1

Go for simple anchor tags.

React-router's Link tags are good if that page lies on one of your routes. Otherwise, just use good-old anchor tags

const url = 'https://bleacherreport.com/articles/2910730-fifa-21-breaking-down-standard-ultimate-covers-and-newest-features'

<a href={url} />

Answer 2

if you are using redirection to another url which is a part of your project , then use

<Link to=""> ....<Link>

example :

const my_url = '/contact-us'

<Link to={my_url}>Click here </Link>

---

But if you are redirection to external link , like : google.com , amazon.com , etc use old <a href="link">....</a>

example : <a href="https://www.google.com/"> click here</a>

In your case the soliution is :

const article = {
  url : "https://www.google.com/"
}

<a href={article.url}>
     <img src={article.urlToImage} alt="thumb"/>
</a>