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