React应用部署到Render/Surge后链接返回404问题求助

一、SPA路由刷新/直接访问404问题 #

这是React单页应用部署后的典型问题，核心原因：

• 本地开发时，create-react-app的开发服务器会自动把所有路由请求转发到index.html，由React Router处理；但部署到Surge/Render这类静态托管服务时，服务器默认会查找对应路径的物理文件（比如访问/orders会找orders.html），找不到就返回404。

分平台解决方法： #

1. Render平台

• 进入你的静态站点设置页面，找到**"Rewrites and Redirects"**配置项
• 添加一条规则：/* → /index.html，规则类型选择"Rewrite"
• 保存后重新部署，所有路由请求会被转发到index.html，交由React Router处理。

2. Surge平台

• 在项目根目录创建200.html文件，内容和index.html完全一致
• 部署时执行命令：surge ./build your-domain.surge.sh
• Surge会自动将所有404请求重定向到200.html，让React Router接管路由逻辑。

二、API请求域名错误问题 #

刷新后请求发到前端域名，说明API的baseURL配置存在问题：

• 本地开发时用相对路径（比如/api/orders），开发服务器会代理到后端；但部署后，相对路径会以当前页面的前端域名为基准，而非后端域名。

解决步骤： #

1. 找到项目中配置API请求的文件（比如src/services/api.js）
2. 将API的baseURL从相对路径改为后端完整域名：

   // 原配置可能是：
   // const baseURL = '/api'
   // 修改为：
   const baseURL = 'https://vinyl-shop.onrender.com/api'
   

3. 也可以用环境变量区分开发/生产环境：
   • 在项目根目录创建.env.production文件，添加：

     REACT_APP_API_BASE_URL=https://vinyl-shop.onrender.com/api
     

   • 代码中读取环境变量：

     const baseURL = process.env.REACT_APP_API_BASE_URL || '/api'
     

4. 重新构建项目后重新部署。

三、验证测试 #

1. 部署完成后，直接在新标签页访问/orders或/admin，确认不再返回404
2. 刷新商品详情页，检查API请求的目标域名是否为后端域名（vinyl-shop.onrender.com）

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