首页 > 网页制作 >React 生产构建部署后直接访问路由404解决方案

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

来源：互联网 2026-07-01 08:37:01

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

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

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

注意：不同平台配置方式有别

_redirects 文件方案仅适用于 Netlify 等支持重定向规则的托管平台，对 Nginx 完全无效。若部署在 Nginx 上，需直接修改 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，说明服务端配置未生效。