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

Question

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

formInputs 它是一个简单的 object

<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 并尝试根据您当前的位置计算路径。

And if you're only using //www.instagram.com , the browser will use the same protocol as the current page, eg http://localhost -> http://www.instagram.com