如何在React SSR配置中解决根路径'/'被express.static拦截的问题

架构老林

2026-10-5

问题原因

express.static 默认会自动响应匹配路径下的 index.html 文件，且 Express 中间件按代码定义顺序执行。如果你把 app.use(express.static(...)) 写在了 app.get('/') 前面，同时静态资源目录下存在 index.html，访问根路径时就会被静态中间件直接拦截返回，不会走到你写的路由处理逻辑。

解决方案

方案1：调整中间件注册顺序，把根路由定义放到静态资源中间件前面
Express 会按顺序匹配中间件和路由，根路由先匹配到就直接执行逻辑，不会进入后续的静态资源处理：

// 先注册根路由
app.get('/', (req, res) => {
  // 你的 SSR 数据获取、页面渲染逻辑
  res.send(/* 渲染后的 SSR 页面内容 */)
})
// 再注册静态资源中间件，处理非根路径的静态资源请求
app.use(express.static('bundle File Path'))

方案2：禁用 express.static 的默认 index 返回逻辑
给静态中间件添加 index: false 配置，就算静态目录存在 index.html，也不会自动响应根路径请求，会继续向下匹配你定义的路由：
```
app.use(express.static('bundle File Path', {
  index: false
}))
// 后续正常注册根路由即可
app.get('/', (req, res) => {
  // SSR 逻辑
})
```
方案3：给静态资源中间件增加统一前缀
把静态资源挂载到专属路径前缀下，只有匹配该前缀的请求才会走静态资源处理，完全避免和页面路由冲突，是 SSR 场景的最优选择：
```
// 只有访问 /assets 开头的路径才会处理静态资源，根路径不受任何影响
app.use('/assets', express.static('bundle File Path'))
// 正常注册所有页面路由即可
app.get('/', (req, res) => {
  // SSR 逻辑
})
```
注意使用该方案需要同步修改 React 打包配置，把静态资源的公共路径前缀改为 /assets/，确保资源引用路径正确。