React应用仅首页路由(/)可用，其他路由刷新/直接访问报404（Nginx部署）

这个问题源于React是单页应用（SPA），前端路由需由应用自身处理，但Nginx默认会把非根路径的请求当作静态资源查找，找不到就返回404。本地开发服务器已内置请求转发逻辑，所以不会出现该问题。

步骤1：修改Nginx配置 #

找到你的Nginx配置文件（常见路径：/etc/nginx/sites-available/default 或 /etc/nginx/nginx.conf），在对应的server块中添加try_files指令，将所有请求转发到React的index.html：

server {
    listen 80;
    server_name localhost; # 替换成你的域名或localhost

    root /usr/share/nginx/html; # 替换成你React构建产物的实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 核心配置：找不到文件时转发到index.html
    }
}

步骤2：重启Nginx服务 #

执行以下命令重启Nginx使配置生效：

sudo systemctl restart nginx

补充说明 #

• 确保你的React项目使用的是BrowserRouter（而非HashRouter），HashRouter会让URL带#后缀，虽不会出现404，但URL格式不够友好。
• 验证构建产物路径是否正确，确保Nginx能访问到index.html及其他静态资源。

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