使用ExpressJS托管React打包产物时如何解决React路由cannot GET错误

数据老陈

2026-9-26

问题原因

Express 路由遵循从上到下优先匹配的规则，请求命中先定义的路由后就不会继续匹配后续路由：

最初的配置只处理了根路径/的前端路由返回，其他React前端路由没有匹配规则，所以会返回Cannot GET /xxx错误
修改后的配置把*通配符路由放在了最前面，所有请求都会优先命中该路由返回index.html，排在后面的/data接口自然不会生效

解决方法

调整路由定义的顺序即可，优先级按「静态资源 > API接口 > 前端路由兜底」排序，正确配置如下：

// 1. 最高优先级：托管React打包后的静态资源（js、css、图片等）
app.use(express.static(path.join(__dirname, '../client/build')));

// 2. 次高优先级：定义所有Express API接口，全部放在通配符路由之前
app.get('/data', (req, res) => {
    res.json(data);
});
// 其余所有自定义API路由都写在这个区域

// 3. 最低优先级：兜底处理所有未匹配到的请求，返回index.html交给React路由处理
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});