React部署Nginx后刷新二级内部路由空白问题求助

问题原因 #

React单页应用的路由由前端Router管理，刷新二级及更深层级路由时，浏览器会直接向Nginx请求对应路径的物理文件，但该文件并不存在。若静态资源路径配置不当，即使Nginx返回index.html，页面也会因无法加载CSS/JS而出现空白。

解决方案 #

1. 配置静态资源的Nginx路由 #

取消注释原有location /static/块，并修改为直接读取本地构建的静态资源（无需代理后端）：

location /static/ {
    root /var/www/domain.com;
    expires 30d; # 可选：设置静态资源缓存，优化加载速度
}

2. 调整根路径的路由 fallback 规则 #

修改location /块，确保所有非API、非静态资源的请求都指向index.html，交由React Router处理：

location / {
    root /var/www/domain.com;
    try_files $uri $uri/ /index.html;
}

添加$uri/是为了兼容目录形式的请求，确保所有未匹配到的路径都能正确fallback到入口文件。

3. 统一React构建的路径配置 #

在package.json中固定设置：

"homepage": "/"

执行npm run build重新构建项目，将新的构建包替换到/var/www/domain.com目录下。

4. 生效Nginx配置 #

执行以下命令验证并加载新配置：

sudo nginx -t
sudo systemctl reload nginx

内容的提问来源于stack exchange，提问作者Umeshan Weerasekara