如何在 Rails 路由器之上使用 React Router（不使用 react-rails gem）？答案

【问题标题】：How to use React Router on top of Rails router (not using react-rails gem)?如何在 Rails 路由器之上使用 React Router（不使用 react-rails gem）？
【发布时间】：2016-09-14 12:59:54
【问题描述】：

现在我正在使用 browserify-rails 编译 js 文件，在 Ruby on Rails 应用程序（没有 react-rails gem）之上制作 React 应用程序。

所以我尝试向我们react-router 配置应用程序的路由器

这是我的 main.js

import React from 'react';
import ReactDOM  from 'react-dom';
import { Router, Route } from 'react-router';
import { browserHistory } from 'react-router';

/*Import Component*/

import DashBoard from './components/dashboard';
import Group from './components/dashboard';

/*
 *
 * Routes
 *
 * */

var routes = (
    <Router history={browserHistory}>
        <Route path="/" component={DashBoard}/>
        <Route path="/group" component={Group}/>
    </Router>
);

ReactDOM.render(routes , document.querySelector('#main'));

但是当我去

http://my.app.dev/group

我明白了

No route matches [GET] "/group" (From Rails)

那么我该如何解决这个问题并在 Rails 路由器上使用 React 路由器呢？

谢谢！

【问题讨论】：

标签： javascript ruby-on-rails reactjs

【解决方案1】：

如果您想将所有请求重定向到单个页面，这很简单：

# config/routes.rb 

root 'dash_board#index'
get '*path', to: 'dash_board#index'

如果 Rails 将在 DashBoard#index 页面上呈现您的 React 组件，React 的路由器将从那里拦截它。

【讨论】：

这是一个好习惯吗？然后，您是否将所有操作都设为非 html 并在反应中处理所有路由？只是想了解一下 react 路由的目的，谢谢！
拥有“一级”通配符路由可以解决一些 gem 的问题。您可以做的是挂载您的应用程序，例如在命名空间中。例如：yourdomain/a。它更丑但更安全。
但是 API 路由会发生什么？如果我们强制所有请求转到一个特定页面，我们将如何调用 API？
@KrupaSuthar 好问题。 Rails 路由自上而下匹配，因此如果您将 *path 放在文件的最后，API 端点将保持不变。
这种方法在处理从ActiveStorage 检索文件时生成的URL 时会出现问题。我收到 406 错误（不可接受）。添加此处提出的解决方案后，ActiveStorage 似乎不再控制此路由。

【解决方案2】：

您还可以在Router.rb中手动指定您需要的所有URL，使用Router将它们重定向到您的rails控制器，例如/home：

# config/routes.rb 
Rails.application.routes.draw do
  root action: :index, controller: 'home'

  get 'url1', action: :index, controller: 'home'
  get 'url2', action: :index, controller: 'home'
  get 'url3', action: :index, controller: 'home'
end

请注意，如果你有类似的东西，你的基础 React 组件将使用 Router 来使用相应的组件：

<Route path="/url1" component={ ComponentForUrl1 } />
<Route path="/url2" component={ ComponentForUrl3 } />
<Route path="/url3" component={ ComponentForUrl2 } />

【讨论】：

这仍然首先将请求发送到 rails 路由器，然后返回到 react-router。从而卸载 Root 组件。