React生产构建下直接访问路由404的终极解决方案

React 应用在 Nginx 上部署后，直接访问子路由（如 /privacy-policy）返回 404，根本原因是服务端未将所有前端路由请求回退到 index.html，导致 React Router 的客户端路由无法生效。

React 应用部署到 Nginx 后，直接访问某个子路由（比如 /privacy-policy）却返回 404，这几乎是每个前端开发者都会遇到的典型问题。问题根源在于：服务端没有把前端路由的请求统一回退到 index.html，导致 React Router 的客户端路由无法正常工作。

这一问题的本质是服务端路由与前端路由不匹配。React Router（包括 v6 版本）采用客户端路由机制，依赖浏览器的 History API 在单页应用中切换视图。但前提条件是：当用户直接在地址栏输入 /privacy-policy 访问，或者在该页面下刷新时，Nginx 必须将请求始终交给 index.html，由 React 应用自行解析路径并渲染对应组件。否则，Nginx 会尝试在磁盘上查找名为 privacy-policy 的文件或目录——找不到便会返回 404。

注意一个常见误区：网上有些文章提到使用 _redirects 文件来解决，但该方法只适用于 Netlify 这类静态托管平台，对 Nginx 完全无效。既然项目部署在 Nginx 上，就必须直接修改 Nginx 的配置规则，而非在前端项目中添加一个文件就了事。

正确解决方案：配置 Nginx 的 try_files 回退机制

server {
  listen 80;
  server_name shreejisecuresofttech.com;
  root /var/www/your-react-build-folder;  # 指向 build 输出目录（含 index.html）
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # 可选：为静态资源（js/css/img）启用缓存
  location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

关键说明

• try_files $uri $uri/ /index.html; 这一行是核心：它告诉 Nginx 首先查找是否存在对应的真实文件（$uri），再尝试查找目录（$uri/），最后——最关键的一步——将所有剩余请求 fallback 到 /index.html。
• 这样一来，所有非静态资源的请求都会由 index.html 响应，后续路由解析工作交由 React Router 处理。
• 修改配置后，建议先执行 sudo nginx -t 验证语法是否正确，确认无误后再运行 sudo systemctl reload nginx 使配置生效。

额外建议

• 检查 package.json 中的 homepage 字段。如果使用了相对路径（如 "homepage": "."）或直接指定了域名（如 "https://shreejisecuresofttech.com"），会影响静态资源的加载路径，务必确保与 Nginx 的 root 指向一致。
• 若使用 BrowserRouter，无需额外设置 basename，但 Nginx 的 root 必须指向 build 目录，并确认 index.html 确实存在于该目录下。
• 开发阶段想快速验证生产构建效果，可使用 serve -s build 命令——该命令默认支持 SPA 回退，能帮助提前排查问题。

按照上述 Nginx 配置调整完成后，无论用户从首页正常导航，还是直接输入 https://shreejisecuresofttech.com/privacy-policy，都会正常加载 组件，令人困扰的 404 问题即可彻底解决。