React Router Dom的Link组件如何直接跳转外部URL？

Link组件是专门为React单页应用的内部路由跳转设计的，它会自动将to属性的值拼接在当前域名后，所以直接传入www.google.com这类不带协议的外部链接时，会被识别为内部路径，导致跳转到http://localhost:5000/www.google.com。

要实现外部链接的正确跳转，需要区分内部路由和外部链接，分别使用不同的标签：

解决步骤 #

• 先判断链接是否为外部链接（通过协议头http:///https://，或www.前缀识别）
• 内部路由继续用<Link>组件，外部链接改用原生<a>标签，并处理协议补全和安全属性

修改后的代码示例 #

let obj = { key: 'google', title: 'Google link', link: 'www.google.com' }
let obj2 = { key: 'about', title: 'About', link: '/about' }

// 判断是否为外部链接
const isExternal = (url) => /^(https?:\/\/|www\.)/.test(url);

// 补全外部链接的https协议
const formatExternalUrl = (url) => {
  return url.startsWith('www.') ? `https://${url}` : url;
};

// 渲染对应的跳转标签
{isExternal(obj.link) ? (
  <a 
    href={formatExternalUrl(obj.link)} 
    target="_blank" 
    rel="noopener noreferrer"
  >
    {obj.title}
  </a>
) : (
  <Link to={obj.link}>{obj.title}</Link>
)}

关键说明 #

• rel="noopener noreferrer"：使用target="_blank"打开外部链接时，必须添加这个属性，避免新页面通过window.opener访问原页面上下文，消除安全隐患。
• 协议补全：如果外部链接仅以www.开头，浏览器会默认当作相对路径处理，手动补全https://才能让浏览器识别为绝对URL，实现正确跳转。

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