为什么我的 React 应用程序将外部 URL 附加到 http://localhost:/<port> 而不仅仅是 URL 本身？

Question

在我的 ReactJS 应用程序 (create-react-app) 中，我有一个锚标记，带有指向外部 URL www.google.com 的旧 href 属性，当我单击该 DOM 元素时，该应用程序会将目标 URL 附加到的HTTP：//本地主机：3000和URI变为HTTP：//本地主机：3000 / www.google.com

我错过了什么？

我尝试过设置rel={'external'}并尝试处理它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;

我希望浏览器将我重定向到仅 www.google.com，并且基本上应该退出该应用程序。更好的是，使用所需的 URL 在浏览器中打开一个新窗口或选项卡。

Answer 1

尝试这个

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

这将打开新标签

target="_blank" 

这将打开 google.com

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

如果你没有在href 的开头添加https://，浏览器会认为它是本地链接。