为什么盖茨比从a标签中连接url ?

Question

我的页面包含一个到远程服务的链接，它看起来像:

<a href={link} target="_blank" rel="noopener noreferrer">
<div className="appLink">{linkText}</div>
</a>

如果我的url从https://开始，它在一个新的选项卡中完美地打开，但是与www.example.com一起，它打开了loclahost:8000/www.example.com，为什么会发生这种情况?

我尝试使用从盖茨比导入的Link，但它以相同的方式工作。

Answer 1

这不仅仅是Gatsby所特有的，它发生在所有锚中(实际上，<Link>组件最终表现得像一个锚，但在React的作用域内)。从MDN文档中可以看到:

href

超链接指向的URL。链接并不局限于基于http的URL——它们可以使用任何支持的URL方案通过浏览器

如果你没有添加HTTP协议，它被解释为你正在使用一个相对路径，所以它被连接到当前域。你可以在这篇绝对路径vs相对路径/链接文章中查看更多细节。

请记住<Link>组件仅用于内部导航。对于外部导航，必须使用标准的<a>标签。