如何修复部署在render.com的Create React App刷新子页面的Not Found问题

核心原因 #

SPA的路由属于前端路由，刷新子页面时浏览器会直接向服务器请求对应路径，但静态服务器默认没有该路径的物理文件，因此返回404。你的server.js已经配置了SPA fallback规则，但问题大概率出在部署方式或静态站点的路由转发设置上。

两种解决方法 #

方法1：保留静态站点部署模式 #

在项目的public目录下创建_redirects文件，写入以下内容：

/*    /index.html   200

webpack构建时会自动将public目录的文件同步到dist，Render的静态站点服务会读取该文件，将所有路由请求转发到index.html，交由React路由处理。

方法2：改为部署Node.js服务 #

你的server.js已经正确实现了SPA fallback逻辑（app.get('/*', ...)返回index.html），只需调整Render的部署配置：

1. 确保package.json中包含正确的脚本：

   "scripts": {
     "build": "webpack --mode production",
     "start": "node server.js"
   }
   

2. 在Render项目设置中：
   • 将Build Command设置为npm run build
   • 将Start Command设置为npm start
3. 重新部署后，Render会先构建生成dist文件夹，再启动你的Express服务器，所有路由请求都会被正确转发到index.html。

额外优化：webpack配置调整 #

可以在webpack的output字段中添加publicPath: '/'，确保生产环境下资源路径正确：

output: {
  path: path.join(__dirname, 'dist'),
  filename: 'app.js',
  publicPath: '/'
}

内容的提问来源于stack exchange，提问作者Carlos del Río Francés