web-dev-qa-db-fra.com

Comment utiliser React Router sur le routeur Rails (sans utiliser reag Rails gem)?

Maintenant, je crée l’application React en plus de l’application Ruby on Rails (avec un bijou réactif-Rails) en utilisant browserify-Rails pour compiler des fichiers js.

J'ai donc essayé de nous réagir-routeur pour configurer le routeur de l'application

C'est mon 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'));

Mais quand je vais à 

http://my.app.dev/group

J'ai eu 

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

Alors, comment puis-je résoudre ce problème et faire de React Router sur le routeur Rails?

Merci!

javascriptruby-on-railsreactjs
12
Varis Darasirikul

Si vous souhaitez rediriger toutes vos demandes vers une seule page, rien de plus simple:

# config/routes.rb 

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

Si Rails rendra vos composants React sur la page d'index DashBoard #, le routeur de React l'interceptera à partir de là.

28
EugZol

Vous pouvez également spécifier toutes les URL dont vous avez besoin dans Router, manuellement dans routes.rb, en les redirigeant vers votre contrôleur Rails à l'aide du routeur, par exemple,/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

Notez que votre composant React de base utilisera le routeur pour utiliser le composant correspondant, si vous avez quelque chose comme:

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