MERN应用部署后非首页刷新报404问题求助

1. 确认Express路由顺序 #

catch-all路由必须放在所有API路由之后，否则会提前拦截API请求。检查你的代码结构是否符合以下顺序：

// 先挂载所有API路由
app.use('/api', require('./api/your-routes-file'));

// 托管React构建后的静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 最后定义catch-all路由，返回React入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

2. 校验build目录路径 #

根据你的项目结构调整路径：

• 如果Express入口文件在项目根目录：path.join(__dirname, 'build')
• 如果入口文件在api文件夹内：path.join(__dirname, '../build')（需要回退到根目录找build）

3. 检查Render部署配置 #

• 确认Build Command为npm run build（React项目默认构建命令）
• 确认Start Command指向正确的Express入口，比如node index.js或node api/index.js
• 若Render提供"Public Directory"设置，确保值为build

4. 验证React Router配置 #

确保使用BrowserRouter而非HashRouter，HashRouter的路由不会发送到服务器，而BrowserRouter需要服务器端catch-all路由配合。

5. 排查部署缓存问题 #

• 查看Render部署日志，确认build目录是否正常生成，无构建报错
• 用浏览器无痕模式测试，避免本地缓存干扰

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