如何在Rails路由器上使用React Router(不使用react-rails gem)?

Var*_*kul 18 javascript ruby-on-rails reactjs

现在我通过使用browserify-rails编译js文件,在Ruby on Rails应用程序(使用react-rails gem)上创建React应用程序.

所以我试着让我们反应路由器来配置应用程序的路由器

这是我的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'));
Run Code Online (Sandbox Code Playgroud)

但是当我去的时候

http://my.app.dev/group
Run Code Online (Sandbox Code Playgroud)

我有

No route matches [GET] "/group" (From Rails)
Run Code Online (Sandbox Code Playgroud)

那么我该如何解决这个问题并将Ract路由器置于Rails路由器之上呢?

谢谢!

Eug*_*Zol 35

如果您想将所有请求重定向到单页,那很简单:

# config/routes.rb 

root 'dash_board#index'
get '*path', to: 'dash_board#index'
Run Code Online (Sandbox Code Playgroud)

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

  • @KrupaSuthar 好问题。Rails 路由自上而下匹配,因此如果您将“*path”放在文件的最后,API 端点将保持不变。 (6认同)
  • 但是API路由会怎样?如果我们强制所有请求转到一个特定页面,我们将如何调用API? (2认同)
  • 当您处理从“ActiveStorage”检索文件时生成的 URL 时,此方法会出现问题。我收到 406 错误(不可接受)。添加此处提出的解决方案后,ActiveStorage 似乎不再控制该路由。 (2认同)