静态部署的React应用如何避免前端路由跳转调用服务端路径

问题原因 #

你遇到的是BrowserRouter模式下单页应用部署的典型问题：BrowserRouter基于H5 History API实现前端路由，仅在应用内通过Link/useNavigate跳转时不会触发后端请求，但是直接输入地址、刷新页面、首次访问非根路径时，浏览器会默认向后端发起对应路径的请求，这是浏览器的正常行为，不是前端路由失效。

解决方案 #

方案1：标准BrowserRouter部署方案（推荐，URL无特殊符号）

修改Express中initHostingReactUI方法的实现，先托管静态资源，再配置非接口路由的回退逻辑：

public initHostingReactUI() {
  // 优先托管build目录下的所有静态资源（js、css、图片等）
  this._app.use(express.static(path.join(__dirname, 'build')));

  // 所有非/api开头的GET请求统一返回index.html，交给前端路由处理路径匹配
  this._app.get(/^(?!\/api).*/, (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
}

这个方案的逻辑说明：

• 静态资源请求会被express.static优先处理，不会触发回退逻辑
• 所有/api开头的接口请求会正常走你原来的控制器逻辑，不受影响
• 其他请求返回index.html后，React代码加载完成会自动匹配路径渲染对应页面，用户无感知
• 你提到的"仍然发起后端请求"是浏览器的正常行为，该请求仅返回体积极小的index.html，静态资源可走浏览器缓存，对性能几乎无影响，是目前单页应用部署的通用标准方案。

方案2：HashRouter方案（无额外后端请求，URL带#）

如果你完全不想有非接口的后端请求，可以将前端路由从BrowserRouter替换为HashRouter，修改Routing.tsx代码即可：

import { HashRouter, Route, Switch } from "react-router-dom";

function Routing() {
  return (
    <HashRouter>
      {/* 原有路由配置完全不变 */}
      <Switch>
        <Route path="/error" component={Error} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Main} />
      </Switch>
    </HashRouter>
  );
}

该方案下前端路由会自动加#前缀，比如http://localhost:8000/#/contact，#后的内容不会发送到后端，不会触发额外的后端请求，缺点是URL格式不美观。

注意事项 #

所有应用内的跳转必须使用react-router-dom提供的Link组件或者useNavigate/useHistory钩子，不要用原生<a>标签或者window.location.href跳转，原生跳转必然会触发后端请求。

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