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; 表示：先尝试匹配真实文件（$uri），再尝试目录（$uri/），最后全部 fallback 到 /index.html；
• 此配置确保所有非静态资源请求均由 index.html 响应，交由 React Router 处理；
• 修改后需执行 sudo nginx -t 验证配置，再运行 sudo systemctl reload nginx 生效。

? 额外建议：

• 确保 package.json 中 homepage 字段正确（如 "homepage": "." 或 "https://shreejisecuresofttech.com"），影响静态资源路径；
• 若使用 BrowserRouter，无需额外 basename，但务必保证 Nginx root 指向 build 目录，且 index.html 存在；
• 开发时可使用 serve -s build 快速验证本地生产构建行为（它默认支持 SPA 回退）。

完成上述 Nginx 配置后，无论用户从首页导航还是直接输入 https://shreejisecuresofttech.com/privacy-policy，都将正常加载 <PrivacyPolicy /> 组件，彻底解决 404 问题。