Nginx重写规则导致React路由404，怎么解决？

Tr° 爱豪提问于 2026-03-04 05:00:22 阅读 9

工具

我在用React做前端，部署到Nginx后，直接访问二级路由比如 /dashboard 就报404，刷新页面就挂了。本地开发没问题，但上线后只有首页能打开。

我试过在Nginx里加 rewrite ^/(.*)$ /index.html last; 但好像没生效，还是404。是不是配置位置不对？或者要配合 try_files 用？

这是我的路由组件代码：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

Nginx

我来解答赞 12 收藏

反馈

1 条解答

FSD-柯豪 Lv1

这是前端开发部署时最经典的一个坑，几乎每个做单页应用（SPA）的人都会踩一遍。别急，你的React代码没问题，问题全在Nginx配置上。

第一步，咱们得先搞清楚为什么会404。
当你在浏览器直接访问 /dashboard 或者刷新页面时，浏览器会向Nginx请求这个路径。Nginx是个老实的文件服务器，它会在你的网站根目录下找一个叫 dashboard 的文件或者文件夹。但是React打包后只有一堆静态资源（js、css、img）和一个入口文件 index.html。根本就没有 dashboard 这个实体文件，所以Nginx找不到，直接就给你甩了一个404。而在本地开发时，是因为有开发服务器（比如Webpack Dev Server）做了拦截，把所有请求都转发给了 index.html，所以没问题。

第二步，为什么你的 rewrite 没生效。
其实 rewrite 也能用，但配置起来容易出错，而且 try_files 才是处理这种SPA路由的标准姿势。你之前的 rewrite 可能是因为匹配规则或者优先级问题没跑通，咱们直接换最稳妥的方案。

第三步，上配置代码。
你需要找到你的 Nginx 配置文件（通常在 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/xxx），找到 server 块里面的 location / { ... } 这一段，把它改成下面这样：

server {

    listen 80;

    server_name your-domain.com; # 这里换成你的域名或IP



    root /var/www/html; # 这里换成你的React打包后的dist目录路径

    index index.html;



    location / {

        # 核心配置就在这一行

        # 意思是：先尝试找用户请求的文件($uri)，找不到就尝试找目录($uri/)

        # 如果还找不到，那就把请求全部交给 /index.html 处理

        try_files $uri $uri/ /index.html;

    }



    # 如果你用了React Router的Browser模式，通常还需要处理静态资源缓存，这里简单带一下

    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {

        expires 1y;

        add_header Cache-Control "public, immutable";

    }

}

注意看代码里的注释，核心就是 try_files $uri $uri/ /index.html; 这一句。它告诉Nginx：不管用户访问什么深层的路由，只要在磁盘上找不到对应的物理文件，就统统把请求扔给 index.html。一旦 index.html 加载了，React Router 就会接管，根据 URL 显示 /dashboard 组件。

第四步，保存并重载配置。
修改完记得保存文件，然后执行命令让Nginx重新加载配置：

sudo nginx -t # 先测试一下配置有没有语法错误

如果测试通过了，再执行：

sudo systemctl reload nginx

或者

sudo service nginx reload

再去浏览器刷新一下 /dashboard 试试，应该就能正常访问了。以后遇到这种前端路由在服务器404的问题，第一时间就往 try_files 上想，绝对没错。

2026-03-04 08:17