如何在Heroku上配置单页Create-React-App实现URL重写至index.html

嘿，我碰到过一模一样的问题！用Create React App搭配官方buildpack部署到Heroku时，要实现像Firebase Hosting那样的URL重写（让react-router不管直接访问子路由还是从首页导航都正常工作），确实得靠static.json来配置，但你的配置里有几个小细节没做好，导致没生效，我来帮你一步步搞定：

1. 修正static.json配置 #

你的配置里有明显的路径映射错误（比如/legal/*指向了/images/），而且缺少了关键的root字段（告诉buildpack构建产物的目录）。正确的配置应该是这样：

{
  "root": "build/",
  "routes": {
    "/images/*": "/images/",
    "/legal/*": "/legal/",
    "/media/*": "/media/",
    "/fav/*": "/fav/",
    "/styles/*": "/styles/",
    "/**": "index.html"
  }
}

• root: 指定静态文件的根目录，Create React App构建后的产物都在build/文件夹里，这个字段必须加，否则buildpack找不到你的静态资源。
• 路由映射：每个静态资源目录（比如/images/、/legal/）要正确映射到自身，确保静态文件能被正常访问。
• "/**": "index.html": 这是核心规则——捕获所有不匹配静态资源的请求，重写到index.html，让react-router在客户端接管路由逻辑，和Firebase的重写规则效果完全一致。

2. 确认Heroku使用正确的Buildpack #

要确保你的Heroku应用用的是mars/create-react-app这个专门的buildpack，而不是默认的Node.js buildpack：

• 先检查当前buildpack：

heroku buildpacks

• 如果不是目标buildpack，设置它：

heroku buildpacks:set mars/create-react-app

3. 重新部署应用 #

修改完static.json后，提交代码并推送到Heroku：

git add static.json
git commit -m "Fix static.json for react-router routing"
git push heroku main

4. 验证效果 #

部署完成后，直接访问一个react-router定义的子路由（比如https://your-app.herokuapp.com/about），如果能正常加载页面而不是返回404，就说明配置生效了！

这个配置的原理和Firebase Hosting的重写规则一样：让服务器把所有非静态资源的请求都转发到index.html，这样react-router就能在客户端处理路由切换，不管用户是直接访问子路由还是从首页导航过来都能正常工作。

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