How to use React Router on top of Rails router (not using react-rails gem)?

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!

EugZol · Accepted Answer · 2016-09-15 01:38:31Z

55

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.

answered Sep 15, 2016 at 1:38

EugZol

6,56425 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

James L. Over a year ago

Is this a good practice? Do you then make all actions non-html and handle all routing in react? Just trying to learn the purpose of react routing, thanks!

Daniel Over a year ago

Having a "first level" wildcard route can deal to problems with some gems. What you could do is to mount your app, for instance in a namespace. For instance: yourdomain/a . It is uglier but safer.

Krupa Suthar Over a year ago

But what happens to API routes? How we will be able to call API if we force all request to go to one particular page?

Joseph Cho Over a year ago

@KrupaSuthar Good question. Rails routes matches top down, so if you put the *path at the very end of your file the API endpoints will remain untouched.

Franchy Over a year ago

This approach has a problem when you are dealing with URL generated when retrieving files from ActiveStorage. I get a 406 error (Not Acceptable). It seems that ActiveStorage is not taking control of this route anymore after the addition of the solution proposed here.

|

Borzh · Accepted Answer · 2019-01-29 20:35:32Z

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 } />

answered Jan 29, 2019 at 20:35

Borzh

5,2552 gold badges53 silver badges68 bronze badges

1 Comment

Vikas Kumar Over a year ago

This still first sent the request to the rails router and then back to the react-router. Thus unloading the Root component.

flacko · Accepted Answer · 2022-08-25 18:59:55Z

1

It might be 2 years later, but I believe I'm not the only one having this issue nowadays, so here's un updated answer that actually helped.

Instead of only defining a redirect from *path, to a desired route, a constraints parameter must be provided so requests for resources (css, js, etc.) don't get 406 responses:

get '*path', to: "home#index", constraints: ->(request) do
  !request.xhr? && request.format.html?
end

I found the solution here.

answered Aug 25, 2022 at 18:59

flacko

1322 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to use React Router on top of Rails router (not using react-rails gem)?

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related