Nginx部署React应用后直接访问非首页路径报404该如何配置？

核心原因 #

你遇到的是BrowserRouter模式下客户端路由的典型问题：React应用的所有路由逻辑都在index.html内实现，Nginx默认会尝试查找URL路径对应的真实磁盘文件/目录，非首页路径没有对应的真实文件，就会返回404。

修改配置 #

你只要替换原有location /块的内容即可，修改后的完整server块配置如下：

server {
    listen       80;
    server_name   domain_name.com www.domain_name.com;

    location / {
        root   C:\My_React_App\frontend\build;
        index  index.html index.htm;
        # 新增下面这行配置
        try_files $uri $uri/ /index.html?$args;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

配置说明 #

• try_files：按顺序检查是否存在对应路径的真实文件/目录，都不存在时就返回根目录下的index.html
• $args参数会保留原URL的查询参数（比如?page=1这类参数会完整传递给React路由）

生效操作 #

修改配置保存后，进入Nginx安装目录，执行命令重载配置即可生效：

nginx -s reload

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