React生产构建直接访问链接出现404错误求助

问题原因 #

你使用的BrowserRouter采用HTML5 History模式：

• 从首页跳转路由时，是前端JS直接切换页面内容，不会向Nginx发送新的资源请求；
• 但直接在地址栏输入路由（比如/privacy-policy）或刷新页面时，浏览器会向Nginx请求对应路径的静态文件，而服务器上并没有这个路径的文件，因此返回404。

解决方法 #

修改Nginx配置，让所有请求都指向React应用的index.html，交给前端路由处理：

1. 找到你的Nginx站点配置文件（通常位于/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下）
2. 在对应server块中添加或修改location规则：

server {
    listen 80;
    server_name shreejisecuresofttech.com;

    root /path/to/your/react/app/build; # 替换为你React构建产物的实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 核心配置，引导所有请求到index.html
    }

    # 若启用了HTTPS，在HTTPS的server块中也要添加上述location规则
}

3. 重启Nginx使配置生效：

sudo systemctl restart nginx

额外注意事项 #

• 确保已执行npm run build生成生产构建文件，且Nginx配置中的root路径正确指向build目录
• 为避免index.html被强缓存导致修改不生效，可在Nginx配置中添加：

location = /index.html {
    expires -1; # 禁止缓存index.html
}

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