React中如何让<a>标签的href属性始终识别为绝对路径

实现原理 #

浏览器判定href路径类型的规则是：当href值没有协议前缀、也不是以/开头的站内绝对路径时，就会将其识别为相对当前页面路径的相对路径，自动拼接当前站点域名前缀。要让外部域名始终作为绝对路径跳转，只要给没有协议头的域名统一补上标准协议即可。

具体实现 #

1. 先定义一个url格式化工具函数

const formatAbsoluteUrl = (url) => {
  // 过滤站内绝对路径，不需要加协议
  if (url.startsWith('/')) return url
  // 已经带http/https/ftp等协议头的地址直接返回
  if (/^([a-z]+:)?\/\//i.test(url)) return url
  // 无协议的外部地址统一补https前缀
  return `https://${url}`
}

2. 在绑定a标签href属性时，先调用上述函数处理url值即可

<a href={formatAbsoluteUrl(url)}>{url}</a>

注意事项 #

• 如果需要和当前站点协议保持一致，可以将补充的前缀改为//，比如返回//${url}，这种写法会自动继承当前页面的http/https协议，缺点是如果目标站点不支持当前页面的协议会跳转失败
• 外部站点跳转建议额外配置target="_blank" rel="noopener noreferrer"属性，避免安全风险
• 如果你的业务场景不会出现站内/开头的路径，可以删掉函数中对应的判断逻辑

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