React+Express项目刷新/history路由出现Cannot GET错误的解决方法

问题原因 #

React Router 使用的是客户端路由：通过页面内的JS逻辑完成路由跳转，不会向服务器发送新的HTTP请求。但当你刷新页面或直接在地址栏输入/history这类路由时，浏览器会直接向Express服务器发起GET /history请求，而服务器在静态文件目录中找不到对应的history文件或路由配置，因此返回Cannot GET /history错误。

解决方案 #

在Express配置中添加一个兜底路由（Catch-all Route），让所有非API、非静态资源的请求都返回前端打包后的index.html，交由React Router处理客户端路由。

完整Express配置示例

const express = require('express');
const path = require('path');
const app = express();

// 1. 优先处理API路由（如果有）
app.use('/api', require('./routes/api'));

// 2. 托管前端build目录的静态资源（CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'build')));

// 3. 兜底路由：所有未匹配的请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

关键注意事项 #

• 路由顺序很重要：必须先处理API路由，再托管静态资源，最后设置兜底路由。Express会按顺序匹配路由，确保API请求不会被兜底路由拦截。
• 确认build目录路径正确：path.join(__dirname, 'build')要对应你实际存放前端打包文件的目录位置。
• 若使用HashRouter：URL会带#（如http://localhost:3001/#/history），这种模式下不会出现刷新404问题，但URL格式不如BrowserRouter简洁。

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