Nginx同服部署WordPress与React后刷新React子路由返回404问题求助

问题原因 #

1. 你的React项目使用了Browser History前端路由模式，这种模式下的子路由（比如/map/explore-towns）刷新时会直接向Nginx发起全路径请求，而服务器上实际不存在对应路径的静态文件。
2. 你当前配置里/map location块的try_files规则存在逻辑问题：当找不到对应路径的文件时，规则里的/map/index.html?$args是绝对路径，会触发Nginx内部重定向，跳出当前/map location块，重新走全局location匹配。
3. 重定向后的/map/index.html请求会命中根路径的location /规则，最终被转发给WordPress处理，WordPress没有对应路由就返回了404页面。

修复方案 #

修改/map对应的location块配置，用命名location处理路由重写，避免跳出当前匹配规则，参考配置如下：

location ^~ /map {
    alias /opt/urbanwater/build/;
    index index.html;
    # 找不到文件时走命名location处理路由重写
    try_files $uri $uri/ @map_rewrite;
}

# 专门处理React路由回退
location @map_rewrite {
    rewrite ^/map/(.*)$ /map/index.html last;
}

修改后重启Nginx即可生效，刷新子路由会正常返回React项目的index.html，由前端路由接管渲染逻辑。

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