React搭配Rails API项目生产环境刷新页面出现404错误如何解决？

问题根因 #

你使用了react-router-dom的BrowserRouter组件，它基于HTML5 History API实现客户端路由：

• 应用内点击链接跳转时，仅由前端JS修改地址栏状态、渲染对应组件，不会向后端发起请求，因此功能正常
• 刷新页面时，浏览器会将当前完整URL发送到后端Rails服务器，Rails默认只会匹配你定义的API路由，找不到对应前端路径的资源就会返回404
• 开发环境下React Dev Server默认开启了historyApiFallback配置，所有请求会自动回退到React入口index.html，因此不会出现该问题

修复方案 #

方案1：Rails托管React静态资源 #

如果你的React打包后的静态资源是放在Rails的public目录下，由Rails统一提供服务：

1. 先确保所有API相关路由都定义在Rails路由规则的最前面
2. 在Rails的config/routes.rb末尾添加兜底路由规则：

Rails.application.routes.draw do
  # 你的原有API路由定义，例如
  # namespace :api do
  #   post '/login', to: 'sessions#create'
  #   post '/signup', to: 'users#create'
  # end

  # 匹配所有非AJAX的HTML请求，返回React入口页面
  get '*path', to: 'home#index', constraints: ->(req) { !req.xhr? && req.format.html? }
  root 'home#index'
end

3. 新增app/controllers/home_controller.rb控制器，返回React的入口文件：

class HomeController < ApplicationController
  def index
    render file: Rails.public_path.join('index.html'), layout: false
  end
end

方案2：前后端分离部署（Nginx托管前端） #

如果前端静态资源单独用Nginx托管，仅API请求转发到Rails服务：
修改Nginx站点配置，添加前端路由兜底规则：

server {
  listen 80;
  server_name 你的站点域名;
  root 你存放React打包后dist文件的绝对路径;

  # 前端路由回退配置
  location / {
    try_files $uri $uri/ /index.html;
  }

  # API请求转发到Rails服务
  location /api/ {
    proxy_pass http://你的Rails服务内网地址/;
    proxy_set_header Host $host;
  }
}

额外代码修复提示 #

你提供的app.js代码存在语法错误：/view-profile对应的Route组件结束标签后，多了一行冗余的</Route>，需要删除该冗余标签避免渲染异常。

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