React中Link组件打开外部链接路径异常的问题及解决方法

问题原因 #

React Router 的 <Link> 组件是专为单页应用内部路由跳转设计的，它会把 to 属性的值当作相对路径，自动拼接到当前页面的基础 URL 后面。当你传入完整的外部 URL（比如 https://linkedin.com/...）时，它不会识别这是外部链接，而是直接把它追加到当前路由路径（比如 /about-us/）后面，就出现了你看到的 http://localhost:3000/about-us/https://www.linkedin.com/in/ni..../ 这种错误地址。

修复方法 #

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

外部链接不需要依赖 React Router 的路由机制，直接用原生 <a> 标签即可，同时加上 rel="noopener noreferrer" 是安全最佳实践，能防止新页面通过 window.opener 篡改原页面：

<a 
  target="_blank" 
  href="https://www.linkedin.com/in/n....../"
  rel="noopener noreferrer"
>
  <i className='fab fa-linkedin-in'></i>
</a>

方法2：若非要用 <Link> 组件（不推荐，无必要） #

手动阻止 <Link> 的默认跳转行为，再用 window.open 打开外部链接：

<Link 
  to="#" 
  onClick={(e) => {
    e.preventDefault();
    window.open("https://www.linkedin.com/in/n....../", "_blank", "noopener noreferrer");
  }}
>
  <i className='fab fa-linkedin-in'></i>
</Link>

不过这种方式完全没必要，原生 <a> 标签已经能完美解决问题，还更简洁。

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