Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?

Question

In my ReactJS app (create-react-app) I have an anchor tag with a good old href attribute pointing to an external URL, www.google.com, and when I click on that DOM element, the app appends the target URL to the http://localhost:3000 and the URI becomes http://localhost:3000/www.google.com

What am I missing?

I have tried setting rel={'external'} and have tried handling it through onClick={()=>{window.location.assign("www.google.com")}

import React from "react";
import {NavLink, Redirect} from "react-router-dom";
import TextLink from "../textLink/TextLink";
import "./footer.css";


/**
 *
 * @param {{theme: string}} props
 */
const Footer = props => {
  const { theme } = props;
  return (
        <div className={`footer footer-${theme}`}>
          <div className="wrapper">

            <div id="social-media-icons">
              <NavLink to={"/contact-us"}>
              <i className="fab fa-facebook" />
              </NavLink>


              <a rel={'external'} className="fab fa-instagram" href={"www.google.com"} />


            </div>
          </div>
        </div>

  );
};

export default Footer;

I want the browser to redirect me to only www.google.com and should get out of the app basically. Even better, open a new window or tab in the browser with the desired URL.

Answer 1

Try this

<a rel={'external'} className="fab fa-instagram" 
    target="_blank" href={"https://www.google.com"} />

this will open new tab

target="_blank" 

and this will open google.com

href={"https://www.google.com"}

If you don't add https:// at the begining of the href browser will consider it as local link.