React中a标签跳转外部链接时打开本地子路由而非目标链接问题

问题原因 #

你遇到的跳转异常是因为href属性传入的www.youtube.com没有携带http://或https://协议头，浏览器会默认将不带协议的路径识别为当前站点的相对路径，自动拼接在当前域名（localhost:3000）后面，所以会触发本地子路由请求。

解决方案 #

方案1：直接补全协议头（适用于所有item.link都是外部站点的场景） #

直接给所有外部链接加上https://前缀即可，两种实现方式：

• 赋值时直接补全：将item.link的赋值改为"https://www.youtube.com"
• 模板字符串拼接：在a标签处直接拼接协议

<a href={`https://${item.link}`} target="_blank" rel="noopener noreferrer">{item.about}</a>

注意：该方案需要保证item.link本身不会携带协议头，否则会出现https://https://xxx.com的格式错误

方案2：加逻辑判断自动补全（适用于同时存在内部相对路径、外部链接的场景） #

先写一个工具函数判断链接是否已经带协议，没有的话再自动补全：

const getValidHref = (link) => {
  if (!link) return '#'
  // 匹配http/https开头的链接
  return /^https?:\/\//.test(link) ? link : `https://${link}`
}

然后在a标签中调用该函数即可：

<a href={getValidHref(item.link)} target="_blank" rel="noopener noreferrer">{item.about}</a>

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