React中点击外部链接跳转路径错误问题求助

我之前也碰到过一模一样的问题！React Router的<Link>和<Redirect>组件是专门为单页应用的内部路由跳转设计的，它们会自动把你传入的路径当作相对路径，拼接到当前应用的域名（也就是http://localhost:3000）后面，这就是为什么你的外部链接会变成http://localhost:3000/recommendation-detail/xxx的原因。

下面给你两个简单有效的解决方案：

方案一：直接使用原生<a>标签（最推荐） #

对于外部链接，完全不需要借助React Router的组件，直接用原生HTML的<a>标签就能完美解决，还能保留浏览器默认的链接行为（比如右键新窗口打开）。

替换你原来的input元素为以下代码：

<div className='col'>
  <label htmlFor='link'> Link: </label>
  <a 
    href={link} 
    target="_blank" // 可选：新窗口打开链接，不需要可以去掉
    rel="noopener noreferrer" // 安全必备：防止新页面获取当前页面的控制权
    className="form-control"
  >
    {link}
  </a>
</div>

小提示： #

确保你的link变量里的URL是完整的，必须包含http://或者https://。如果用户输入的链接没有前缀，可以加个简单判断补全：

const fullLink = link.startsWith('http') ? link : `https://${link}`;

方案二：通过JS手动触发跳转（适合自定义逻辑场景） #

如果你的链接需要绑定额外的点击逻辑（比如统计点击次数），可以用window.location.href或者window.open手动触发外部跳转：

// 定义点击处理函数
const handleExternalLinkClick = () => {
  // 当前窗口跳转
  window.location.href = link;
  
  // 或者新窗口打开（同样要加安全属性）
  // window.open(link, '_blank', 'noopener noreferrer');
};

// 在页面中使用可点击元素
<div className='col'>
  <label htmlFor='link'> Link: </label>
  <span 
    onClick={handleExternalLinkClick}
    className="form-control"
    style={{ cursor: 'pointer', color: '#0d6efd', textDecoration: 'underline' }} // 模拟链接样式
  >
    {link}
  </span>
</div>

补充说明： #

<Link>和<Redirect>的核心作用是在不刷新页面的情况下切换单页应用的内部路由，它们会把所有传入的路径都解析为相对于当前应用根路径的地址，所以完全不适合处理外部链接。

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