时间戳

首页 > 解决方案 > 为什么我的 React 应用程序将外部 URL 附加到 http://localhost:/而不仅仅是 URL 本身？

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

问题描述

在我的 ReactJS 应用程序（create-react-app）中，我有一个锚标记，其中包含一个很好的旧 href 属性，指向外部 URL，www.google.com，当我单击该 DOM 元素时，应用程序会将目标 URL 附加到http://localhost:3000和URI 变为http://localhost: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 打开一个新窗口或选项卡。

标签： reactjsreact-router-dom

解决方案

尝试这个

<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://，浏览器会将其视为本地链接。

推荐阅读