CODEWITHSUNDEEP
javascriptreactjsreact-router
Ning
Ning

Reputation: 595

{Link} does not take to the correct URL in reactjs

I am learning Reactjs, and there is a problem when I try to use {Link} to go to external websites.

<Link to={repo.html_url}>
{repo.name}
</Link>

Let's say the repo.html_url is
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.
Instead of taking me to this URL, it takes me to http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend, which adds localhost in front of it.

How to solve this problem?

Upvotes: 3

Views: 1654

Answers (2)

sleighty
sleighty

Reputation: 1075

I'm assuming you're using React Router's Link component, as it is not part of vanilla React.

Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:

<a href={repo.html_url}>{repo.name}</a>

There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.

Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).

Upvotes: 3

Vaibhav Mule
Vaibhav Mule

Reputation: 5136

For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.

<a href={repo.html_url}>
{repo.name}
</a>

Upvotes: 1

Related Questions