React-Dom中Browser Router失效：Rails部署React应用路由404

这问题我之前也碰到过！核心原因很简单：Rails是服务端优先的路由系统，而React Router是客户端路由。

当你直接访问根路径/时，Rails会默认返回public/index.html，这时候React加载完成后，Router就能正常工作；但你直接访问/landing这类子路径时，Rails会先去匹配自己的路由规则，找不到对应的路由就直接返回404了，根本没机会让React Router接管请求。而开发环境用React自带的服务器时，它会自动把所有请求都转发到index.html，所以没问题。

解决方案：让Rails把前端路由请求转发到index.html #

你只需要在Rails的路由配置里加一个"兜底"路由，把所有非API的HTML请求都指向public/index.html，步骤如下：

1. 修改config/routes.rb
   先把你的API路由（如果有的话）放在前面，然后添加兜底路由：

   # 先定义你的API或其他Rails专属路由
   namespace :api do
     # 示例：get '/users', to: 'users#index'
   end
   
   # 兜底路由：所有HTML请求都转发到index.html
   get '*path', to: 'static#index', constraints: ->(req) { req.format.html? }
   

   这里的约束条件req.format.html?是为了确保只有HTML请求被转发，API请求（比如JSON）还是会正常走Rails的路由。

2. 创建StaticController
   在app/controllers/下新建static_controller.rb：

   class StaticController < ApplicationController
     def index
       # 直接返回public目录下的index.html
       send_file Rails.root.join('public', 'index.html')
     end
   end
   

3. 确认React Router的配置
   确保你用的是BrowserRouter（不是HashRouter），因为HashRouter会通过URL中的#来处理路由，不会触发服务端请求，但通常生产环境我们更倾向于用干净的URL：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/landing" element={<Landing />} />
         </Routes>
       </Router>
     );
   }
   

额外注意事项 #

• 部署时要确保React的build产物完全复制到Rails的public目录下，比如执行npm run build后，把build文件夹里的所有内容（包括index.html、static文件夹等）都复制过去。
• 如果你的Rails应用开启了Turbo，可能需要额外配置Turbo不要干扰前端路由，不过一般只要上面的路由配置正确，问题就解决了。

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