React Nav.Link跳转.html页面失效问题排查与解决

先给你捋清楚为啥跳转失效：Nav.Link是React Bootstrap结合React Router的组件，它默认会拦截点击事件，用客户端路由逻辑处理跳转，不会让浏览器直接请求静态HTML文件——这就是问题的核心。下面给你几个实用的解决方案：

方案1：改用原生标签（最简单直接） #

直接用普通<a>标签替换Nav.Link，同时加上nav-link类来保留原组件的样式：

<a href="QrCode.html" className="nav-link" target='_self'>QR Code</a>

原生<a>标签不会被React Router拦截，浏览器会直接请求目标HTML文件，完美解决跳转问题。

方案2：保留Nav.Link，手动触发跳转 #

如果你想继续用Nav.Link的样式和交互，可以通过onClick事件阻止默认的客户端路由行为，手动触发页面跳转：

<Nav.Link 
  href="QrCode.html" 
  target='_self'
  onClick={(e) => {
    // 阻止React Router的默认跳转逻辑
    e.preventDefault();
    // 手动让浏览器跳转到目标HTML
    window.location.href = "QrCode.html";
  }}
>
  QR Code
</Nav.Link>

关键检查：确认QrCode.html的位置 #

不管用哪种方案，一定要确保QrCode.html放在React项目的public目录下（和index.html同级）。React打包时，public目录下的文件会直接复制到输出目录的根路径，这样"QrCode.html"这个相对路径才能被浏览器正确识别。如果文件放在src目录里，打包后不会被包含在输出文件中，自然找不到目标页面。

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