code flow in rackt react-router

Question

I am having difficulty knowing the flow of react-router by (https://github.com/rackt/react-router).

If i have 2 files: routes.js, app.js(entry component) as below:

var Router = require('react-router');
var Route = Router.Route;

var routes = (
  <Route handler={App}>
    <Route path="/" handler={home}/>
  </Route>
);


module.exports = routes;

app.js

var React = require('react');
var Router = require('../routes.js');
var RouteHandler = Router.RouteHandler;

var App= React.createClass({
    render: function(){
        return (
             <RouteHandler/>
        )
    }

});


module.exports = App;

How does the app component gets called? As of traditional way i use following code to render "app" component in app.js.

React.render(
    <App />, document.getElementById('main')
);

Now what i dont understand is what is the following code doing. Is it replacement of traditional way of rendering, i need to use following code to listen to url and render app.js but not the above code?

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.body);
});

What if i am using another js file "main.js" to render "app.js" and now i want to use app.js to handle all the route how do i do it. Mean to say i want to render what ever the route is passed in app.js.

My code in main.js is below:

React.render(
    <APP />, document.getElementById('main')
);

Answer 1

First off, you need to update your App.js file to grab the correct react-router module. You're assigning the export of your routes.js file to Router, but it should be react-router. Node will actually cache the result of the module and reuse it for every other reference to it.

Your approach would work ok -- typically you see something like a Main.js file to handle the routing, and the App.js is more of the wrapper for your component(s).

So I would make a Main.js file like so..

// Main.js
var React = require('react');
var Router = require('react-router');
var routes = require('../routes.js');
var RouteHandler = Router.RouteHandler;

Router.run(routes, function(Handler, state) {
  React.render(<Handler />, document.body);
});

Then, just make your App.js mount the RouteHandler and handle any other parent state. When you navigate to the route, it will match it in the Router.run function and then all routes in the 'family' of the matched route will be rendered.