NGINX前缀匹配不符合预期：React SPA子路由直接访问报404

核心原因 #

React SPA用的是前端客户端路由，和Nginx的服务器端路由逻辑完全不同：

• 应用内导航时，是react-router-dom在浏览器端直接修改URL，不会向Nginx发起新请求，所以能正常工作。
• 但直接在地址栏输入/wms-ui/some-other-page访问时，浏览器会向Nginx发送对应路径的请求，Nginx默认会去服务器磁盘找/var/www/<my-private-ip>/html/wms-ui/some-other-page这个文件或目录——显然这个路径不存在，所以返回404。

你的现有location /wms-ui配置里，index index.html仅在请求路径是目录（比如/wms-ui/）时才会生效，自动返回目录下的index.html；但请求具体子路由路径时，Nginx不会自动回退到index.html，只会严格匹配物理文件。

修复配置 #

修改/wms-ui的location块，添加try_files指令，让Nginx在找不到对应文件时，自动返回SPA的入口index.html：

location /wms-ui {
    alias /var/www/<my-private-ip>/html/wms-ui;
    index index.html;
    # 关键：先尝试找请求的文件/目录，找不到就返回index.html交给前端路由处理
    try_files $uri $uri/ /wms-ui/index.html;
}

配置说明 #

• $uri：匹配当前请求的路径（比如/wms-ui/some-other-page），Nginx会在alias指向的目录下找对应文件
• $uri/：如果请求路径是目录，尝试访问该目录
• /wms-ui/index.html：前面两种情况都匹配失败时，返回SPA的入口文件，让React路由接管后续的路径解析

修改后重启Nginx（sudo systemctl restart nginx），再直接访问子路由就能正常加载了。

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