create-react-app+react-router v4部署Express静态服务器后复杂路由无法访问问题

嘿，这个问题我之前踩过一模一样的坑！本质原因其实很直白：当你直接访问http://localhost:3000/xxxxxx/12345这类深层路由时，Express服务器会默认去寻找对应路径的静态文件，但这些路径根本不是服务器上的真实文件——它们是React Router在浏览器端负责处理的客户端路由，服务器找不到自然就返回404了。

要搞定这个问题，只需要修改Express的配置，让它把所有GET请求都指向React应用的入口文件index.html，这样React加载后就能接管路由处理了。下面是具体的解决步骤：

1. 先生成生产构建文件 #

首先得把React应用打包成生产版本，确保有可部署的静态资源：

# 用yarn的话
yarn build

# 用npm的话
npm run build

执行完后，项目根目录会生成一个build文件夹，里面就是打包好的所有静态资源。

2. 修改Express服务器配置 #

在你的Express入口文件（比如app.js或server.js）里，添加以下配置：

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

// 第一步：托管React打包后的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 第二步：关键！捕获所有GET请求，返回index.html
// 注意：如果有API路由，一定要把API路由放在这行代码之前，否则API请求也会被返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

3. 重要注意事项 #

• API路由优先级：如果你的Express服务器还有API接口，一定要把API路由的定义放在app.get('*', ...)之前，否则所有API请求都会被返回index.html，导致接口完全无法工作。举个例子：

  // 先定义API路由
  app.get('/api/user/:id', (req, res) => {
    res.json({ id: req.params.id, name: 'Test User' });
  });
  
  // 再托管静态文件和处理客户端路由
  app.use(express.static(path.join(__dirname, 'build')));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  

• History模式确认：你的代码里用了ConnectedRouter，确保它使用的是browserHistory（这是默认配置）——如果是hash模式的话不会出现这个问题，但browser模式必须配合服务器端的上述配置才能正常工作。

这样配置之后，不管你直接访问哪个深层路由，Express都会返回React的入口文件，React Router就能正确渲染对应的组件了。

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