React Router dom Link标签跳转外部链接遇404，如何正确使用？

首先得明确：React Router的Link（你重命名的Link2）是专门给单页应用做内部路由跳转用的，它会自动拦截点击事件，尝试在你的应用内部匹配路由路径，所以直接用它跳外部链接必然会出现404——因为你的应用里根本没有对应外部链接的路由。

给你几个靠谱的解决方法：

• 直接用原生<a>标签（最推荐）
  外部链接没必要用React Router的Link，直接用HTML原生的a标签就好，还能避免路由拦截的问题：

  <a 
    href="你的谷歌云端硬盘简历链接" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    查看我的简历
  </a>
  

  这里加rel="noopener noreferrer"是为了符合安全规范，防止新打开的页面通过window.opener劫持你的应用页面。

• 如果非要复用Link的UI样式，手动拦截跳转行为
  要是你想保持和内部路由Link一致的样式，可以给Link2添加点击事件，阻止默认的路由跳转，然后手动打开外部链接：

  <Link2
    to="#"
    onClick={(e) => {
      e.preventDefault(); // 阻止React Router的默认路由跳转
      // 新标签页打开链接
      window.open("你的谷歌云端硬盘简历链接", "_blank");
      // 如果不需要新标签页，用下面这句：
      // window.location.href = "你的谷歌云端硬盘简历链接";
    }}
  >
    查看我的简历
  </Link2>
  

另外解释下你之前嵌套a标签的问题：Link组件会拦截左键点击事件，所以左键点击时触发的是Link的内部路由逻辑，而右键“在新标签页打开”是直接触发a标签的默认行为，绕开了Link的拦截，所以只有右键有效。

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