React 生产构建部署后直接访问路由返回 404 的解决方案

React 应用使用 BrowserRouter 时，若部署在静态服务器（如 Nginx）上未正确配置服务端路由回退，直接访问非根路径（如 /privacy-policy）会触发 404 错误，因服务器无法识别前端路由。

react 应用使用 browserrouter 时，若部署在静态服务器（如 nginx）上未正确配置服务端路由回退，直接访问非根路径（如 `/privacy-policy`）会触发 404 错误，因服务器无法识别前端路由。

该问题本质是服务端路由与前端路由的不匹配：React Router 的路由由 JavaScript 在浏览器端动态处理，但当你直接在地址栏输入 https://shreejisecuresofttech.com/privacy-policy 并回车时，请求会直接发送到服务器——而 Nginx 默认只查找物理存在的 /privacy-policy 文件或目录，找不到即返回 404。只有当用户从首页（/）点击 Link 跳转时，才由 React Router 拦截并渲染对应组件，此时不发生真实页面请求。

⚠️ 注意：_redirects 文件方案 仅适用于 Netlify 等支持重定向规则的托管平台，不适用于 Nginx。你当前部署在 Nginx 上，因此需修改 Nginx 配置，而非添加 _redirects 文件（该文件在 Nginx 中完全无效）。

✅ 正确做法（Nginx 配置）：
在你的 Nginx server 块中，将所有非静态资源请求回退至 index.html，让 React Router 接管路由解析：

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

完整示例配置（通常位于 /etc/nginx/sites-available/your-site）：

server {  listen 80;  server_name shreejisecuresofttech.com;  root /var/www/shreejisecuresofttech/build;  index index.html;  location / {    try_files $uri $uri/ /index.html;  }  # 确保静态资源（JS/CSS/图片）可被正常访问  location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {    expires 1y;    add_header Cache-Control "public, immutable";  }}

✅ 配置后务必重载 Nginx：

sudo nginx -t && sudo systemctl reload nginx

? 补充建议：

• 确保 package.json 中 homepage 字段设置正确（如 "homepage": "." 或 "https://shreejisecuresofttech.com"），避免打包后资源路径错误；
• 若使用 create-react-app，构建产物默认为 build/ 目录，请确认 Nginx root 指向该目录；
• 不要依赖客户端缓存掩盖问题——清除缓存后仍 404，说明服务端配置未生效。

总结：前端路由 ≠ 服务端路由。静态部署必须由 Web 服务器将未知路径统一返回 index.html，交由 React Router 渲染。对 Nginx 而言，try_files 是标准且可靠的解决方案。