React Router V4部署AWS EC2后内部路由404问题求助

这个问题我太熟悉了——本质是客户端路由和服务器路由的冲突：React Router是在浏览器端处理路由的，但当你直接访问serverhostname:8081/edit-menu或者刷新这个页面时，EC2上的Node.js服务器会试图寻找物理路径下的edit-menu文件/文件夹，找不到就返回404。而本地开发服务器（create-react-app自带的）已经帮你处理了这个fallback逻辑，所以本地正常。

下面是具体的解决步骤：

1. 确保React项目已正确构建 #

先在本地或者EC2上执行npm run build，生成build文件夹，里面包含编译后的静态资源和index.html。这个文件夹必须部署到你的EC2项目目录中。

2. 修改Node.js服务器配置（核心步骤） #

你的Node.js服务器（比如Express）需要添加两个关键配置：

• 先托管React的静态资源
• 对所有非API请求，返回index.html，让React Router接管路由处理

举个完整的Express服务器示例（假设你的API路由都以/api开头）：

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

// 先处理所有API路由（这部分要放在静态资源托管之前）
app.use('/api', require('./routes/your-api-routes'));

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

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

// 监听端口（和你项目用的8081保持一致）
const PORT = process.env.PORT || 8081;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

⚠️ 注意：

• 这个fallback路由app.get('/*')必须放在所有API路由之后，否则API请求也会被返回index.html
• 确认path.join(__dirname, 'build')的路径正确：如果你的服务器文件（比如server.js）在项目根目录，build文件夹也在根目录，这个路径就是对的；如果结构不同，需要调整路径（比如path.join(__dirname, '../build')）

3. 如果你用了Nginx反向代理（可选） #

如果EC2上还配置了Nginx作为反向代理，你还需要修改Nginx配置文件，添加try_files指令，让Nginx找不到文件时返回index.html：

在Nginx的server块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

修改后重启Nginx：sudo systemctl restart nginx

额外检查点 #

• 确认你用的是BrowserRouter（你代码里已经用了），不要换成HashRouter（虽然能解决404，但URL会带#，体验不好）
• 检查EC2的安全组是否开放了8081端口，确保外部能访问
• 确认EC2上的Node.js服务器已经重启，让新的配置生效

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