nginx部署create-react-app静态包时直接访问路由URL报错如何解决？

• 你使用了BrowserRouter实现前端路由，它基于HTML5 History API，所有路由跳转逻辑都在前端执行，服务器上不存在对应路径的真实静态文件。当你直接在地址栏输入URL访问时，nginx默认会尝试查找磁盘上对应路径的资源，找不到就返回404错误。
• 你当前的nginx配置存在语法错误：location /块直接写在了http块外部，不符合nginx的配置层级要求，你配置的404跳转规则完全没有生效。

1. 修正nginx配置层级
   你需要将路由回退规则写入对应站点的server块中，通常站点配置存放在/etc/nginx/sites-enabled/目录下的配置文件中，参考配置如下：

server {
    listen 80;
    server_name 你的服务器公网IP或绑定的域名;
    # 替换为你create-react-app构建出的build文件夹的绝对路径
    root /var/www/your_project/build;
    index index.html;

    location / {
        # 核心规则：先尝试查找对应路径的静态文件，找不到就返回index.html交给前端处理路由
        try_files $uri $uri/ /index.html;
    }

    # 可选配置：静态资源长期缓存，提升加载性能
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

同时删除你之前写在http块外部的无效location /配置。

2. 验证配置并重启nginx
   执行以下命令检查配置语法是否正确：

nginx -t

提示syntax is ok后执行重启命令生效：

nginx -s reload

3. 可选优化：调整homepage配置
   如果你是将项目部署在域名根路径下，package.json中的homepage: "."可以改为homepage: "/"，避免相对路径导致的静态资源加载异常。如果是部署在子路径下才需要保留相对路径配置。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad