React 应用在 Nginx 上部署后，直接访问非根路径（如 /privacy-policy）返回 404，根本原因是服务端未将所有前端路由请求回退至 index.html，导致 React Router 无法接管路由；需通过 Nginx 配置或静态重定向规则解决。
react 应用在 nginx 上部署后，直接访问非根路径（如 `/privacy-policy`）返回 404，根本原因是服务端未将所有前端路由请求回退至 `index.html`，导致 react router 无法接管路由；需通过 nginx 配置或静态重定向规则解决。
该问题本质是 单页应用（SPA）的路由服务端配置缺失。React Router 在浏览器端实现客户端路由，但当用户直接在地址栏输入 /privacy-policy 并回车时，请求会直接发送到服务器（Nginx），而 Nginx 默认只按真实文件路径匹配——由于 privacy-policy 并非物理存在的文件或目录，Nginx 返回 404。只有当用户从首页加载应用后，React Router 才能拦截后续的 跳转并正确渲染。
虽然部分教程建议在 public/ 目录下创建 _redirects 文件（如 /* /index.html 200），但这仅适用于 Netlify、Vercel 等支持 _redirects 语法的托管平台，并不适用于 Nginx。在 Nginx 环境中，该文件会被忽略，无效。
✅ 正确解法：修改 Nginx 配置，启用 try_files 回退机制：
server {
listen 80;
server_name shreejisecuresofttech.com;
root /var/www/your-react-app/build;
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 处理；
- 确保 root 指向 build/ 目录（即 npm run build 输出路径）；
- 修改后执行 sudo nginx -t && sudo systemctl reload nginx 生效。
⚠️ 注意事项：
- 不要使用 hash 路由（HashRouter）作为临时替代方案，它虽可规避服务端问题，但 URL 中包含 #，不利于 SEO 和用户体验；
- 若使用 basename（如部署在子路径 /app/ 下），需同时配置 BrowserRouter basename="/app" 并调整 Nginx location /app/ { ... }；
- 构建前请确认 package.json 中 "homepage": "."（或 "https://shreejisecuresofttech.com"），避免静态资源 404。
总结：React SPA 的 404 问题不是前端代码缺陷，而是服务端路由配置责任。Nginx 必须主动兜底所有前端路由请求，而非依赖客户端重定向文件。正确配置 try_files 是生产环境最可靠、最标准的解决方案。
