React Router单页应用直连报Cannot GET，Node后端如何修复？

问题原因 #

你用的<BrowserRouter>依赖HTML5 History API实现前端路由：页面内通过<Link>或useNavigate()跳转时，是前端JS直接修改URL并渲染对应组件，不会向Node后端发请求；但直接在地址栏输入路由或刷新页面时，浏览器会直接向Node后端发起对应路径的GET请求，而后端没有配置这些前端路由的处理逻辑，所以返回Cannot GET错误。

解决方案：在Node.js后端配置兜底路由 #

这个问题必须在Node后端处理，核心思路是：让后端把所有非API接口的GET请求，都返回React打包后的index.html文件，这样React加载后就能接管路由渲染。

以Express框架为例，步骤如下：

1. 先把React项目打包（执行npm run build），得到build文件夹（部分项目可能是dist）。
2. 在Express代码中托管静态文件，并添加兜底路由：

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

// 托管React打包生成的静态资源（css、js、图片等）
app.use(express.static(path.join(__dirname, 'client/build')));

// 后端API路由要放在兜底路由前面，避免被拦截
// 比如：app.get('/api/receitas', (req, res) => { ... });

// 兜底路由：处理所有未匹配的GET请求，返回React入口文件index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

关键注意事项 #

• 后端的API路由必须写在兜底路由app.get('*', ...)的前面，否则API请求会被拦截并返回index.html，导致接口无法正常工作。
• 如果使用Koa等其他Node.js框架，逻辑一致：先托管静态文件，再添加一个捕获所有GET请求的中间件，返回index.html。

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