React中a标签href路径被react-router路由路径拼接的问题

这个问题我之前也碰到过！核心原因就是你用的域名没有带协议头，浏览器把它当成相对路径处理了，自然就会和当前项目的域名（localhost）以及react-router的当前路由拼接在一起。

下面给你两种靠谱的解决办法：

• 直接给域名加上协议头
  最简单的方式就是把你的website变量改成带https://或者http://的完整地址：

  const website = "https://www.w3school.com";
  
  <a href={website} target="_blank" rel="noopener noreferrer">
    <i className="fas fa-globe fa-2x"></i>
  </a>
  

  这样浏览器就会识别这是一个绝对路径，直接跳转到目标外部网站，不会再和当前域名拼接。

• 动态补全协议头（适合不确定输入是否带协议的场景）
  如果你的website值是从后端接口或者其他外部来源获取的，不确定是否包含协议头，可以写一个简单的工具函数来自动补全：

  // 工具函数：确保url包含http/https协议
  const addProtocolIfMissing = (url) => {
    // 检查url是否已经以http://或https://开头
    if (!/^https?:\/\//i.test(url)) {
      return `https://${url}`;
    }
    return url;
  };
  
  // 使用示例
  const website = "www.w3school.com";
  const fullExternalUrl = addProtocolIfMissing(website);
  
  <a href={fullExternalUrl} target="_blank" rel="noopener noreferrer">
    <i className="fas fa-globe fa-2x"></i>
  </a>
  

  这个函数会自动判断并补全协议，避免因为输入不规范导致的跳转错误。

另外补充一句：之所以会出现和react-router路径合并的情况，也是因为相对路径会基于当前页面的路由路径来解析，加上协议头后就完全脱离了react-router的路由上下文，直接指向外部域名啦。

内容的提问来源于stack exchange，提问作者user9377613