React Router history模式刷新页面出现404怎么办？

FSD-建杰提问于 2026-01-28 17:40:29 阅读 39

前端

在用React Router v6实现单页应用时，配置了BrowserRouter和Routes，但直接访问嵌套路由路径（比如/users/123）或者刷新页面会报404错误，服务器找不到文件。已经检查过路由配置没问题，这是什么原因啊？

代码是这样写的：


// app.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    
      
        <Route path="/" element={} />
        <Route path="/users" element={}>
          <Route path=":id" element={} />
        
      
    
  );
}

只有通过链接跳转没问题，但直接输入地址栏或刷新就会报错，服务器是Nginx的，是不是需要配置什么特殊规则？

我来解答赞 11 收藏

反馈

2 条解答

设计师康平 Lv1

React Router 的 BrowserRouter 用的是 HTML5 的 History API，这种模式下路由是前端控制的，刷新页面或者直接访问某个路径时，请求会打到后端服务器。这时候如果后端没做相应配置，就会出现 404。

你现在用的是 Nginx，解决方法很简单：**配置一个 fallback 规则，把所有路径都指向你的入口文件**（通常是 index.html），让前端路由接管后续逻辑。

在 Nginx 配置里加上这么一句：

location / {

  try_files $uri $uri/ /index.html;

}

这样即使用户访问 /users/123 或者刷新页面，Nginx 也会把请求导向 index.html，剩下的就交给 React Router 处理了。

顺便说一句，这问题跟路由嵌套没关系，完全是后端配置缺失导致的。我之前也踩过这个坑，上线前没配这个，测试环境一刷新就 404，当时人都傻了 😂

总之，加完这条配置，再试试刷新或者直接输入路径，应该就没问题了。

2026-02-03 10:01

Mr-昊然 Lv1

嗯，这是个很常见的问题。React Router用history模式的时候，刷新页面或者直接访问嵌套路由会404，主要是因为服务器不知道怎么处理这些路径，默认会去找对应的文件，找不到就报404了。

你用的是Nginx，那就在Nginx配置里加个规则就行。让所有没匹配到的路径都重定向回index.html，React Router自己会处理剩下的事情。

在你的Nginx配置文件里加这段：

location / {

    try_files $uri /index.html;

}

记得重启Nginx服务让配置生效：sudo service nginx restart

这样设置后，刷新页面或者直接访问/users/123就不会再404了。WordPress主题里也经常要用类似的方法处理这种前端路由的问题，原理都差不多。

2026-01-31 23:03