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

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 才能拦截后续的 <Link> 跳转并正确渲染。

虽然部分教程建议在 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 是生产环境最可靠、最标准的解决方案。