时间戳

首页 > 解决方案 > 为什么 gatsby 连接来自 a 标签的 url？

javascript - 为什么 gatsby 连接来自 a 标签的 url？

问题描述

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

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

如果我的网址从https://它开始，它会完美地在一个新标签中打开，但www.example.com它会打开它loclahost:8000/www.example.com为什么会发生？

我曾尝试使用Link从 gatsby 导入的文件，但它的工作方式相同。

标签： javascriptgatsby

解决方案

这不仅仅是 Gatsby 特有的事情，它发生在所有的锚点上（实际上，<Link>组件末端的行为就像一个锚点，但在 React 的范围内）。从MDN 文档中可以看到：

链接

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

如果您不添加 HTTP(s) 协议，它会被解释为您使用的是相对路径，因此它会连接到当前域。您可以在这篇绝对路径与相对路径/链接文章中查看更多详细信息。

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

推荐阅读