React-rails: Attempting to use React-Router

[jamby]

So I'm trying to use React-Router in my rails project with React-Rails and it seems to not want to correctly display the component I want when I'm on a specific route.

Inside app/assets/javascripts/components/routes.jsx:

var Router = window.ReactRouter.Router,
    Route = window.ReactRouter.Route,
    Link = window.ReactRouter.Link
    browserHistory = window.ReactRouter.browserHistory;

setTimeout(function() {
  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}/>
      <Route path="/messages" component={MessageSystem}>  
      </Route>
    </Router>
  ), document.getElementById("main").getElementsByClassName("container")[0]);
}, 0);

In the above, I'm only using the setTimeout because it seems to not be able to find anything on page load and says that there is no id main inside the document. setTimeout fixes this.

The App component is just an empty component because I really do not care about it one bit. I'm only rendering a react component when I'm on the /messages route (which on my index.html.haml I am doing the = react_component 'MessageSystem in the corresponding rails view.

I really only want the /messages to display the MessageSystem. That means when I'm on localhost:3000/messages it adds the history hash after the /messages so now it looks like localhost:3000/messages#/?_k=vaeumq.

When I use the React Dev Tools, I see my MessageSystem component when on the page, and then under it I see the Router and the path seems to be just "/". What I think it should be is path="/messages".

Was wondering if anyone else has had any issues using React-Router with react-rails? Thanks

[murtali]

having trouble rendering the routers from rails as well. how were you able to render via render_component?

[nguyenmv2]

Do you have in your App component ? I do believe that's where the components of the route are generated

[jamby]

Sadly since this is inside rails, there's no App component. I have specific features that have the mother "system" component, but no App component that encompasses everything if that's what you mean?

[nguyenmv2]

I'm a complete newbie in this as well, but if you can humor me with this attempt. Try setting the root path as DefaultRoute, then create an App component that returns only

[origamih]

I've made React-router work with this gem. Here is my solution:

1. Download the React-router library https://unpkg.com/react-router/umd/ReactRouter.min.js
   Put it in vendor/assets/javascripts, require it in application.js
   Or you can put it in app/assets/javascript (no need to require)
2. Define the essential React-router variables some where in those javascript asset files.

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;
var IndexLink = ReactRouter.IndexLink;
var IndexRedirect = ReactRouter.IndexRedirect;

1. Add the react_component helper into your view, says the component is ReactHome, this will render the Router component
   <%= react_component 'ReactHome' %>
2. Add the jsx code for Router, in this code you can add the actual React component

var ReactHome = React.createClass({
  render() {
    return (
      <Router>
        <Route path="/" component={your_react_component}>
        </Route>
      </Router>
    );
  }
});

Good luck. The only problem I got is when the page renders a React component, react-rails-hot-loader doesn't work within that component, it works with child components

[rmosolgo]

Thanks for sharing your solution! I hope it works for others, too!

[Kario]

Hi, Thanks for sharing the solution, I got this working on my existing rails app. I cant seem to get it to work on pre-rendering though, it keeps giving me the error:

Google shows this to be that it cant find the history for the Router, which are defined in the js assets:
var hashHistory = ReactRouter.hashHistory;
var browserHistory = ReactRouter.browserHistory;

I tried putting these in the server_rendering.js along with react router include, but it still throws the same error. I attempted to put the components after the declaration of the vars, but then the server renderer couldnt find my components... I cant seem to figure out how to debug ExecJS, but it seems to me there is some kind of error with the definitions causing the whole process to fail...

Has anyone gotten router to work on pre-render?

[Sporky023]

Thanks @origamih.

Latest version of react-router on unpkg has a new url format: https://unpkg.com/[email protected]/umd/react-router.js

[eveevans]

For react-router-dom 4.x
You should change the var, for the new equivalents

var Router        = ReactRouterDOM.BrowserRouter;
var Route         = ReactRouterDOM.Route;
var Link          = ReactRouterDOM.Link;
var HashRouter    = ReactRouterDOM.HashRouter;
var Switch        = ReactRouterDOM.Switch;
var StaticRouter  = ReactRouterDOM.StaticRouter;
var Redirect      = ReactRouterDOM.Redirect;
var Prompt        = ReactRouterDOM.Prompt;
var NavLink       = ReactRouterDOM.NavLink;
var withRouter    = ReactRouterDOM.withRouter;
var match         = ReactRouterDOM.matchPath;

(I'm guesing this is not the complete list, but you get the idea)

[Kastrcn]

how to ssr?

[ziaulrehman40]

I know this is old issue, but i am trying to wrap my head around similar issue, I am struggling to connect wires in rails router to forward requests to frontend router, and to make it not look like whole page is loading.
I tried a solution to create a controller action, have it render main App.js component and put a line in routes.rb to let it know that all requests except some would go to this action to render front-end app. but this still makes server request and makes react router kind of useless because whole page loads.