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

Question

I have links saved in the firebase DB, when I click "save" the link it will updated but when I click to the link icon it redirect me to home page. Example: The link in the DB is "www.instagram.com", when I click the icon it will redirect me to the home with this url "localhost:3000/www.instagram.com", but when I do the console log it logs only "www.instagram.com", can somebody help me please?

formInputs it's a simple object

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

I tryed to use the Link component from react-router-dom but it do the same thing

Answer 1

In short: please try to use a full absolute URL together with the protocol. Instead of a short one. In this case, can change the value to https://www.instagram.com .

Document source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Possible values of href :

• An absolute URL - points to another website (like href="http://www.example.com/default.htm")
• A relative URL - points to a file within a website (like href="default.htm")

The key difference is the // at the beginning. Without it, your browser is considering your given "www.instagram.com" as a relative URL and is trying to calculate the path based on your current location.

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