React动态路由构建或部署后失效问题求助

问题根源 #

你遇到的问题是单页应用（SPA）客户端路由与服务器静态资源服务不兼容导致的：

• React开发模式下，create-react-app内置的开发服务器会自动处理所有路由请求，返回index.html让客户端路由接管。
• 构建部署后，你的Express服务器仅通过express.static返回client/build下的静态文件。当直接访问/resetPassword/123/456这类带多级动态参数的路径时，服务器会尝试寻找client/build/resetPassword/123/456这个不存在的文件，因此返回Cannot GET错误。
• package.json中的homepage配置仅影响打包后静态资源（如JS、CSS）的引用路径，无法解决服务器路由兜底的问题，所以设置它无效。

解决方案 #

修改你的Express服务器代码，添加兜底路由，让所有匹配不到静态资源的请求都返回index.html，交给React客户端路由处理：

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

// 先处理静态资源（CSS、JS、图片等）
app.use(express.static(path.join(__dirname, '../client/build')));

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

// 你的其他API路由要放在兜底路由之前
// 比如 app.use('/api', yourApiRouter);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

注意事项 #

• 确保你的API路由（如果有的话）放在express.static和兜底路由之前，避免API请求被兜底路由拦截。
• 检查path.join(__dirname, '../client/build')的路径是否与你的项目结构匹配，如果服务器文件位置不同，需要调整相对路径。
• 部署到Render平台时，确认服务器启动命令正确（比如node server.js），并且Render的环境配置中没有覆盖静态资源的处理规则。

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