Как использовать React Router поверх маршрутизатора Rails (не используя драгоценный камень с реактивной решеткой)?

Теперь я создаю приложение React поверх приложения Ruby on Rails (без драгоценного камня с реактивной решеткой), используя browserify-rails для компиляции js.

Итак, я попробовал 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)

Итак, как я могу это исправить и сделать React Router сверху Rails маршрутизатором?

Спасибо!

Ответы

Ответ 1

Если вы хотите перенаправить весь свой запрос на одну страницу, это легко:

# config/routes.rb 

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

Если Rails отобразит ваши компоненты React на индексной странице DashBoard #, React router перехватит его оттуда.

Ответ 2

Вы также можете указать все URL-адреса, которые вам нужны, в Router, вручную в route.rb, перенаправив их на контроллер rails с помощью Router, скажем /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 } />