{Link}不能使用reactjs中正确的URL

Question

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?

Answer 1

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

Currently, React Router Link s 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 Link s 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).

Answer 2

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>