React中不使用Router时，如何通过a href实现跳转到外部绝对地址

嘿，这个问题我碰到过好多次啦——浏览器会自动把不带协议头（http://或https://）的URL当成相对路径处理，所以才会把stackoverflow.com拼到你当前应用的域名后面~

要解决这个问题，核心就是确保你的链接是带完整协议头的绝对地址，这里有个简单的实现方式：

1. 写一个URL格式化函数 #

先封装一个小函数，用来给没有协议头的URL自动补上https://：

const formatExternalUrl = (url) => {
  // 检查URL是否已经以http/https开头
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    return `https://${url}`;
  }
  return url;
};

2. 在a标签中使用格式化后的URL #

然后把你的a标签改成这样：

<a 
  href={formatExternalUrl(props.web)} 
  target="_blank" 
  rel="noopener noreferrer"
>
  {props.web}
</a>

额外说明 #

• 加上target="_blank"可以让外部链接在新标签页打开，避免用户直接离开你的应用；
• rel="noopener noreferrer"是安全最佳实践，防止新打开的页面通过window.opener访问你的应用页面，规避潜在的安全风险。

这样处理后，不管props.web是stackoverflow.com还是https://stackoverflow.com，都能正确跳转到目标外部网站啦~

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