react.js 中的链接标签重定向问题

Question

我在 firebase 数据库中保存了链接，当我点击“保存”时，链接会更新，但是当我点击链接图标时，它会将我重定向到主页。 例子： 数据库中的链接是“www.instagram.com”，当我单击该图标时，它会将我重定向到带有此 URL“localhost:3000/www.instagram.com”的主页，但是当我执行控制台日志时，它会记录只有“www.instagram.com”，有人可以帮帮我吗？

formInputs 是一个简单的对象

<a
    target="_blank"
    href={formInputs.ig}
    onClick={() => {
        console.log(formInputs.ig);
    }}
>
    <FontAwesomeIcon
        className="icons"
        icon={faInstagram}
        color="purple"
        size="2x"
    />
</a>

我尝试使用 react-router-dom 中的 Link 组件，但它做同样的事情

Answer 1

简而言之：请尝试将完整的绝对 URL 与协议一起使用。而不是短的。在这种情况下，可以将值更改为https://www.instagram.com。

文档来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

href 的可能值：

• 绝对 URL - 指向另一个网站（如 href="http://www.example.com/default.htm"）
• 相对 URL - 指向网站内的文件（如 href="default.htm"）

关键区别在于开头的//。没有它，您的浏览器会将您给定的"www.instagram.com" 视为相对 URL，并尝试根据您当前的位置计算路径。

如果您只使用//www.instagram.com，浏览器将使用与当前页面相同的协议，例如http://localhost -> http://www.instagram.com