部署至Heroku的React路由问题：手动刷新后仅首页可用

这个问题我之前也碰到过，本质原因是React是单页应用（SPA），前端路由是在浏览器端处理的，但刷新页面时，请求会直接发送给Heroku上的Rails服务器，而Rails API里没有对应这些前端路由的后端路由，所以返回404，导致页面空白。下面是具体的解决步骤：

1. 确保Rails在生产环境中提供静态文件 #

首先，检查你的Rails生产环境配置文件 config/environments/production.rb，确保静态文件服务是开启的：

# config/environments/production.rb
config.public_file_server.enabled = true

Rails API模式下这个配置默认可能是关闭的，所以必须打开，这样Rails才能正确返回React打包后的静态文件（比如index.html、css、js等）。

2. 添加Rails通配符路由，将前端路由请求指向React入口 #

修改 config/routes.rb，在所有API路由的后面添加一个通配符路由，让所有非API的GET请求都返回React的index.html，这样React的前端路由就能接管处理页面路径了：

Rails.application.routes.draw do
  # 先定义你的所有API路由（比如登录、卡片相关接口）
  namespace :api do
    post '/login', to: 'sessions#create'
    resources :cards, only: [:index, :show]
    # 其他API路由...
  end

  # 处理所有前端路由的GET请求，指向React的index.html
  get '*path', to: 'static#index', constraints: ->(req) do
    !req.xhr? && req.format.html?
  end
end

3. 创建StaticController处理入口请求 #

上面的路由需要一个对应的控制器来返回index.html，新建 app/controllers/static_controller.rb：

class StaticController < ApplicationController
  def index
    # 直接渲染React打包后的index.html，不需要Rails布局
    render file: Rails.root.join('public', 'index.html'), layout: false
  end
end

4. 确保React打包文件已放入Rails的public目录 #

在部署到Heroku之前，先在本地打包你的React应用：

npm run build

然后将build文件夹里的所有文件复制到Rails项目的public目录下（覆盖原有文件，如果有的话）：

cp -r build/* public/

之后把这些修改提交到Git，再部署到Heroku：

git add .
git commit -m "Fix SPA routing on Heroku"
git push heroku main

做完这些后，再刷新卡片视图页面，应该就能正常加载了——因为现在刷新时，Rails会返回React的入口文件，React的BrowserRouter会根据URL渲染对应的页面组件，而不是返回404空白页。

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