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

Question

我正在学习Reactjs，尝试使用{Link}访问外部网站时出现问题。

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

假设repo.html_url是
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend。
不用带我进入此URL，而是带我到http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend，它在其前面添加了localhost。

如何解决这个问题？

Answer 1

我假设您正在使用React Router's Link组件，因为它不是普通React的一部分。

当前，React Router Link不支持外部URL，它们仅用于在应用程序内部进行导航。您将要使用标准的HTML锚标记。试试这个：

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

如果您想了解更多信息或留在循环中，围绕Link支持外部URL going on here的问题正在进行一些讨论。

另一种解决方案是在处理逻辑的Link周围实现您自己的包装器（最后为内部路由分配一个<Link>组件，为外部URL分配一个<a>标签）。

Answer 2

对于外部链接，只需使用a标签！因为<Link>仅用于内部路由。 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>