react-router-rails server side renders the correct component, but bypasses the parent component

Question

I'm trying to write an app in ruby on rails with server side rendering using flux, react-rails, react-router-rails and browserify, pretty much based in this tutorial and this repo. So far I've managed to write a simple two-level routeing configuration, and it seems to work fine, since the proper handler is being rendered. The thing is that the root handler (my app component) is being ignored for all the urls besides the root url (/). i.e.:

My routes.js.jsx are like this:

// app/assets/javascripts/routes.js.jsx
var Route        = ReactRouter.Route,
    DefaultRoute = ReactRouter.DefaultRoute;
var MyApp        = require('./components/MyApp');
var Login        = require('./components/session/Login');
var Scrapping    = require('./components/scrapping/Scrapping');

var Router = (
  <Route name="app" path="/" handler={MyApp}>
    <DefaultRoute handler={Login} />
    <Route name="login" path="login" handler={Login}/>
    <Route name="scrapping" path="scrapping" handler={Scrapping}/>
       .
       .
       .
  </Route>
);

module.exports = Router;

And whenever I go to /, App --> Login is rendered. But if I go to /login or /scrapping, only Login or Scrapping are rendered respectively.

Any idea why this could be happening? where should I look? here's the repo Thanks for your help!

Answer 1

The problemas was that the only component being rendered was the one generated by react-router-rails con the serverside, but the app wasn't bootstrapped on the clientes. Un order to solve it, i included a file to bootstrap react on the clientes. You can check the working setup un my repo (link on the cuestión), on the release branch. Look for a file called app/assets/javascripts/app.js or something like that. Im sorry i cant be more specific, but im travelling and im answering from my smartphone. I hope it helps.