React页面无法重定向到静态HTML页面问题求助

原因 #

1. 相对路径解析逻辑错误：React项目的开发服务器（dev server）从项目根目录提供服务，你写的../../index/index.html是相对于组件所在的src目录，但浏览器解析路径是基于当前页面URL（比如开发时是http://localhost:3000/），导致路径被解析成http://localhost:3000/index/index.html，并没有指向你期望的上级两级目录的静态文件。
2. 单页应用路由拦截（若使用React Router）：如果项目引入了React Router，它会默认拦截所有<a>标签的点击事件，把链接当成前端路由处理，最终只刷新当前React页面，而非跳转到外部静态页面。

解决方法 #

方法1：使用绝对路径直接跳转 #

如果知道静态页面的完整URL（比如部署后的https://your-domain.com/index/index.html），直接把href设为绝对路径，浏览器会直接跳转到目标页面，不受React干扰：

<li className="log-out"><a href="https://your-domain.com/index/index.html">Log Out</a></li>

方法2：手动通过window.location.href跳转 #

绕过React的路径处理逻辑，用原生JS控制页面跳转，无论是否使用React Router都有效：

<li className="log-out">
  <button style={{background: 'none', border: 'none', color: 'blue', cursor: 'pointer'}} 
          onClick={() => window.location.href = '../../index/index.html'}>
    Log Out
  </button>
</li>

或者保留<a>标签，阻止默认行为后手动跳转：

<li className="log-out">
  <a href="../../index/index.html" onClick={(e) => {
    e.preventDefault();
    window.location.href = e.target.href;
  }}>Log Out</a>
</li>

方法3：调整静态文件位置（更可靠） #

把index/index.html放到React项目的public目录下，public目录下的文件会被开发服务器直接托管，打包后也会保留在build目录根路径下，这时可以用根相对路径访问：

<li className="log-out"><a href="/index/index.html">Log Out</a></li>

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