React Router 4与Express集成：访问/test路径出现Cannot GET问题咨询

这绝对不是React Router 4和Express不兼容的问题！核心原因是客户端路由和服务器路由的分工没搞清楚：

当你直接在浏览器地址栏输入/test并回车时，浏览器会直接向Express服务器发送一个GET /test的请求，但你的Express服务器里并没有定义这个路由的处理逻辑，所以它就返回了Cannot GET /test的错误。而React Router的路由是运行在浏览器端的，只有当你从根路径（/）加载完整个React应用后，点击页面内的链接跳转时，React Router才会接管路由，不会再向服务器发请求。

要解决这个问题，你只需要让Express把所有非API的请求都返回React应用的入口文件（一般是index.html），这样React Router就能在浏览器端处理这些路由了。具体步骤如下：

1. 确保Express正确托管静态文件 #

首先，把React打包后的静态文件（比如build或public文件夹里的内容）交给Express托管：

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

// 托管React打包后的静态资源
app.use(express.static(path.join(__dirname, 'build'))); // 如果是create-react-app，打包后是build文件夹

2. 添加Catch-All路由 #

在所有API路由的后面，添加一个通配符路由，让所有未匹配到的请求都返回index.html：

// 先定义你的API路由（如果有的话）
app.get('/api/some-data', (req, res) => {
  res.json({ message: 'This is API data' });
});

// Catch-All路由，交给React Router处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

开发环境的小提示 #

如果你用create-react-app在本地开发，不想每次都打包的话，可以在package.json里添加proxy配置，让开发服务器把请求转发到Express：

{
  "proxy": "http://localhost:3000" // 这里填你的Express服务器地址
}

这样在开发时，你可以同时启动React开发服务器和Express服务器，React会把API请求转发给Express，而客户端路由则由React Router直接处理。

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