React Router懒加载配置后页面刷新报404怎么办？

子晨提问于 2026-02-05 21:31:37 阅读 24

前端

在用React Router v6做路由懒加载时，正常点击导航能加载组件，但直接刷新页面或通过地址栏访问就会报404。我用了动态导入：const About = lazy(() => import('./About'))，然后配置了Suspense。路由写的是：


{
  path: 'about',
  element: <Suspense fallback="loading..."> 
    <About />
  </Suspense>
}

服务器是Express，路由只写了app.use(express.static('build'))。网上说要配置historyApiFallback，但我加了之后还是不行。用HashRouter的话没问题，但想用BrowserRouter。是不是哪里配置漏了？

前端路由

我来解答赞 3 收藏

反馈

2 条解答

W″梦轩 Lv1

这个问题的核心其实是服务器配置的问题，React Router 的 BrowserRouter 用的是 HTML5 的 history API，而直接刷新或者访问深层路径时，服务器找不到对应的文件，就会返回 404。你提到的 historyApiFallback 是对的，但可能没配到位。

试试这个方法：在 Express 里，你需要手动处理所有未匹配的路径，把它们重定向到你的 index.html 文件。具体代码可以这样写：

const path = require('path');

const express = require('express');

const app = express();



app.use(express.static(path.join(__dirname, 'build')));



app.get('/*', function (req, res) {

  res.sendFile(path.join(__dirname, 'build', 'index.html'));

});



const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

  console.log(Server is running on port ${PORT});

});

这里的关键是 app.get('/*') 这一行，它会捕获所有未匹配的路由请求，然后返回 index.html，让 React Router 来接管路由逻辑。

另外，确认一下你的项目目录结构，确保 build 文件夹是你打包后的输出目录。如果你用的是 Create React App，默认打包命令是 npm run build，生成的静态文件就在 build 文件夹下。

最后再吐槽一句，BrowserRouter 确实用起来比 HashRouter 优雅，但这点服务器配置的问题确实挺烦人的。不过配好之后就一劳永逸了，加油！

2026-02-19 16:00

___金梅 Lv1

这个问题很常见。React Router v6做懒加载的时候，直接刷新页面会触发服务端请求，Express默认不会把所有请求都指向index.html，所以会报404。

你提到用了express.static和historyApiFallback，但还不好使，可能是因为historyApiFallback配置有问题或者没生效。

你可以在Express中这样配置：

const express = require('express')

const path = require('path')

const app = express()



app.use(express.static(path.join(dirname, 'build')))



app.get('*', (req, res) => {

  res.sendFile(path.join(dirname, 'build', 'index.html'))

})



app.listen(3000)

这个配置的意思是，所有请求都会返回index.html，让前端路由接管路径。这样刷新页面就不会报404了。

另外确保你的React项目打包后的静态资源路径是对的，index.html确实放在build目录里。

BrowserRouter依赖HTML5的history API，不像HashRouter那样靠URL hash变化来切换路由，所以服务端必须配合，不能直接用默认的静态文件服务。

如果你用的是react-router-dom + BrowserRouter + 懒加载，服务端必须兜底返回index.html，否则一刷新就炸。HashRouter不会炸是因为路由信息在hash里，服务器不解析hash。

2026-02-05 22:05