如何配置Express为多路径返回React首页以解决react-router生产404问题

核心逻辑 #

express.static 中间件会优先匹配指定目录下存在的静态资源文件（如 /assets 下的图片、样式、脚本等），匹配成功直接返回资源，不会执行后续中间件。因此我们只需要在静态资源处理逻辑之后，新增未匹配请求的 fallback 规则，统一返回首页 index.html 即可，不需要手动判断排除静态资源路径。

推荐通用配置（适配所有前端路由） #

不需要逐个定义 /foo /bar/:id 这类路由，直接使用通配符路由即可覆盖所有前端路由路径：

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

// 优先处理静态资源
app.use(express.static(path.join(__dirname, 'public')));

// 此处可添加所有后端接口路由，必须放在通配路由之前
// app.get('/api/xxx', (req, res) => { /* 接口逻辑 */ })

// 所有未匹配到的请求统一返回首页，交给react-router处理前端路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => console.log('服务已启动'));

可选方案：仅匹配指定路径 #

如果不需要适配所有前端路由，只想给特定路径返回首页，可以使用正则匹配路由，避免重复编写逻辑：

// 匹配所有/foo或/bar开头的路径
app.get(/^\/(foo|bar)/, (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

注意事项 #

• 通配路由必须放在所有路由规则的最后，否则会覆盖后端接口的正常响应
• 如果React项目构建产物存放在build目录而非public目录，将代码中的路径替换为build即可
• 该方案仅适配React Router的BrowserRouter模式，HashRouter模式本身不会出现直接访问子路由404的问题，无需额外配置

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