使用React Router DOM的createBrowser部署前端到Express后端时遇404问题

问题原因 #

使用createBrowserRouter时，React Router采用HTML5 History模式。刷新非根路径（比如/about）时，浏览器会直接向Express服务器发起对应路径的请求，但服务器上并没有配置该路由，因此返回404错误。

后端解决方案 #

1. 先打包前端项目
   运行前端项目的打包命令，生成静态文件目录（通常是build文件夹）：

npm run build

2. 配置Express静态文件服务
   将Express的静态资源目录指向前端打包后的build文件夹，让服务器能返回前端的静态文件：

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

// 托管前端静态资源
app.use(express.static(path.join(__dirname, 'build')));

3. 添加通配路由兜底
   添加一个匹配所有GET请求的路由，将非API请求全部返回前端的index.html，让React Router在客户端接管路由解析：

// 注意：如果有API路由，必须放在这个通配路由之前
app.get('/api/your-endpoint', (req, res) => {
  // 处理API请求逻辑
  res.json({ data: '示例API数据' });
});

// 所有非API的GET请求都返回index.html
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

关键注意事项 #

• API路由必须放在通配路由之前，否则API请求会被错误地返回index.html。
• 确保path.join(__dirname, 'build')的路径正确，根据你项目中build文件夹的实际位置调整。

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