根本原因是React Router的前端路由路径在Nginx中无对应物理文件，需配置try_files $uri $uri/ /index.html实现fallback。
用 Nginx 托管 React 应用时，浏览器刷新页面出现 404，根本原因是：React Router 使用的是前端路由（如 /dashboard、/profile），这些路径在服务端并不存在真实文件。Nginx 默认只按物理路径查找文件，找不到就返回 404。解决的关键是让所有非静态资源请求都 fallback 到 index.html，由 React Router 在前端接管路由。
配置 location 块处理前端路由
Nginx 需要识别哪些请求该走静态文件，哪些该交还给 React。典型做法是：优先匹配真实存在的静态资源（JS/CSS/图片等），其余全部重写到 /index.html，但不改变 URL 地址（用 try_files 实现）。
在 server 块中添加如下配置：
- 先匹配以 /static/、.js、.css、.png 等结尾的请求，直接返回对应文件
- 对其他请求，使用 try_files $uri $uri/ /index.html; —— 意思是：先查文件是否存在，再查目录，最后兜底到 index.html
示例片段：
location / {
try_files $uri $uri/ /index.html;
}
确保 build 输出路径与 Nginx root 一致
React 项目执行 npm run build 后，默认生成 build/ 目录。Nginx 的 root 指令必须指向这个目录的父级，且路径中包含 build；或者用 alias 精确指定。
推荐写法（假设 build 文件在 /var/www/myapp/build）：
root /var/www/myapp;
location / {
try_files $uri $uri/ /build/index.html;
}
或更清晰的 alias 方式：
location / {
alias /var/www/myapp/build/;
try_files $uri $uri/ /index.html;
}
注意：alias 末尾有斜杠，root 没有；用 alias 时，try_files 中的 /index.html 是相对于 alias 路径的，所以实际找的是 /var/www/myapp/build/index.html。
处理带子路径（basename）的 React 应用
如果 React 应用部署在子路径下（例如 https://example.com/myapp/），需同步调整两处：
- React 侧：在 package.json 中设置 "homepage": "/myapp/"，或在 BrowserRouter 中传入 basename="/myapp"
- Nginx 侧：location 匹配该前缀，并正确映射静态资源
配置示例：
location /myapp/ {
alias /var/www/myapp/build/;
try_files $uri $uri/ /myapp/index.html;
}
此时所有静态资源请求（如 /myapp/static/js/main.js）会被 alias 正确解析，而深层路由（如 /myapp/dashboard）也会 fallback 到 /myapp/index.html。
验证与调试小技巧
改完配置后别忘了重载 Nginx：sudo nginx -t && sudo systemctl reload nginx。常见排查点：
- 打开浏览器开发者工具 → Network 标签，刷新页面，看 404 请求是否是 HTML 还是 JS/CSS —— 若 JS 报 404，说明静态资源路径没配对
- curl -I http://your-domain/some-deep-route 查看响应状态码和 Content-Type，确认返回的是 200 + text/html
- 检查 Nginx error log：tail -f /var/log/nginx/error.log，常有 “open() failed” 提示路径错误
