React Router <Link />跳转异常：如何正确配置外部链接？

return (<Link />)

问题原因 #

React Router 的 <Link /> 组件是为单页应用内部路由跳转设计的。当你传入带完整 HTTP/HTTPS 协议的 URL 时，它不会识别为外部链接，反而会将该 URL 当作当前路由下的相对路径进行拼接，最终导致出现嵌套 URL 的错误。

解决办法 #

方法一：使用原生 <a> 标签（推荐） #

如果跳转目标是外部域名或完整 URL，直接使用原生 <a> 标签即可，这是最符合场景的方案：

<a
  key={key}
  href={link.url}
  target="_blank" // 可选，需要新窗口打开时添加
  rel="noopener noreferrer" // 安全属性，防止恶意页面利用 window.opener 窃取数据
>
  {link.label}
</a>

方法二：让 <Link /> 兼容外部 URL（如需保留组件） #

如果业务场景必须使用 <Link /> 组件，可以通过判断 URL 是否包含协议头，手动处理外部跳转逻辑：

import { Link, useNavigate } from 'react-router-dom';

function YourComponent({ links }) {
  const navigate = useNavigate();

  const handleExternalJump = (url) => {
    window.location.href = url;
  };

  return (
    <div>
      {links.map((link, key) => {
        if (link.url.startsWith('http')) {
          return (
            <span
              key={key}
              onClick={() => handleExternalJump(link.url)}
              style={{ cursor: 'pointer', color: '#0066cc', textDecoration: 'underline' }}
            >
              {link.label}
            </span>
          );
        }
        return (
          <Link key={key} to={link.url}>
            {link.label}
          </Link>
        );
      })}
    </div>
  );
}

核心提示 #

React Router 的 <Link /> 本质是用来管理 SPA 内部路由状态的组件，外部链接场景下优先使用原生 <a> 标签，既简洁又符合组件设计初衷。

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