How to use React Router on top of Rails router (no

Question

Now i am making React app on top off Ruby on Rails app (with out react-rails gem) by using browserify-rails to compile js files.

So i tried to us react-router to config router of the app

This is my 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'));

But when i go to

http://my.app.dev/group

I got

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

So how can i fix this and make React Router on top off Rails router?

Thanks!

Answer 1

You can also specify all the URLs you need in Router, manually in routes.rb, redirecting them to your rails controller with the Router, say /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

Note that your base React component will use Router to use the corresponding component, if you have something like:

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

Answer 2

If you want to redirect all your request to single page, that's easy:

# config/routes.rb 

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

If Rails will render your React components on DashBoard#index page, React's router will intercept it from there.