Ubuntu环境刷新React应用非首页出现Nginx 404错误问题

以下按踩坑概率从高到低排查，覆盖绝大多数配置不生效的场景：

• 配置文件未被Nginx实际加载
  Ubuntu下Nginx默认只会加载/etc/nginx/sites-enabled/目录下的配置，sites-available只是存放可用配置的目录，不会被直接读取。你修改完/etc/nginx/sites-available/default后，需要确认对应软链接存在：

  # 检查软链接
  ls -l /etc/nginx/sites-enabled/
  # 若不存在default软链则执行创建
  ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
  

• 修改配置后未校验重载
  每次改完Nginx配置必须先做语法校验，再重载服务，否则修改不会生效：

  # 校验配置语法，输出syntax is ok、test is successful才说明配置没问题
  nginx -t
  # 重载配置
  systemctl reload nginx
  

• 配置写法存在错误
  1. root指令必须写在server块层级，不要写在location /块内部，否则try_files查找/index.html时会出现路径拼接错误。
  2. 你的try_files配置缺少目录匹配项$uri/，完整正确的配置参考：

  server {
      listen 80 default_server;
      listen [::]:80 default_server;
  
      # 静态资源根目录，写在server层
      root /var/www/html;
      index index.html index.htm;
      server_name _;
  
      location / {
          # 匹配顺序：先找对应路径文件，再找对应路径目录，都找不到就返回index.html交给前端路由处理
          try_files $uri $uri/ /index.html;
      }
  
      # 静态资源规则单独匹配，避免资源请求被错误回退
      location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|map)$ {
          expires 1y;
          add_header Cache-Control "public, immutable";
      }
  }
  

• 静态文件存放路径错误
  确认React执行npm run build生成的所有打包产物（build目录下的全部内容，包括index.html、static文件夹等）直接放在/var/www/html目录下，不要嵌套一层build等子文件夹。执行以下命令确认index.html存在于正确路径：

  ls /var/www/html/index.html
  

• 存在优先级更高的冲突配置
  检查/etc/nginx/conf.d/目录下是否有其他自定义配置文件绑定了80端口、匹配相同域名，导致你修改的default配置没有被命中。可以执行以下命令打印Nginx当前加载的所有完整配置，逐一排查冲突：

  nginx -T
  

补充说明：该问题确实和React Router直接相关，只有使用BrowserRouter（HTML5 History模式路由）时才会出现。本质原因是SPA应用只有一个入口文件index.html，所有子路由跳转都是前端JS控制的，当你直接刷新子路由时，Nginx会在服务器本地查找对应路径的物理文件，找不到就会返回404，配置try_files回退规则的作用就是让所有找不到对应物理文件的请求，都返回index.html内容，交给前端路由解析渲染。如果改用HashRouter（路由带#标识）可以绕开这个问题，但URL美观度较差，生产环境一般还是推荐使用BrowserRouter搭配正确的Nginx回退规则。

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