App.js

import React from 'react/addons';
import {RouteHandler,Navigation,Link, State} from 'react-router';
import {AuthenticationMixin} from '../mixins/authentication';

import {IntlMixin}  from 'react-intl';

import SessionStore from '../stores/session_store';
import NavBarHeader from '../components/Navbar';

export default React.createClass({
  mixins: [Navigation, IntlMixin, State],

  componentDidMount() {
    if (!SessionStore.isLoggedIn()) {
      this.transitionTo('/login');
    }
  },

  getHandlerKey() {
    // this will all depend on your needs, but here's a typical
    // scenario that's pretty much what the old prop did
    var childDepth = 1; // have to know your depth
    var childName = this.getRoutes()[childDepth].name;
    var id = this.getParams().id;
    var key = childName+id;
    return key;
  },

  render (){
    return (
    <div id="deviceready">
      <NavBarHeader />
      <div className="row">
        <RouteHandler key={this.getHandlerKey()} />
      </div>
    </div>
    );
  }
});
  

Home.js

import _ from 'lodash';
import React from 'react/addons';
import {Navigation, Link, RouteHandler} from 'react-router';

var MainMenu = React.createClass({
  // ...
});

var Home = React.createClass({
  mixins: [AuthenticationMixin, Navigation],

  componentDidMount: function() {},
  componentWillUnmount: function() {},

  getInitialState() {
    return {};
  },

  render() {
    return (
      <div>
        <MainMenu />
      </div>
    );
  }
});

export var HomeParent = React.createClass({
  render() {
    return (
      <div className="row">
        <RouteHandler />
      </div>
    )
  }
});

import {Routes} from '../routes';
Routes
  .addTree({
    name: 'home', path: '/', handler: HomeParent
  }, [
    {name: 'home/index', path: '/', handler: Home}
  ]
);

routes.js

import _ from 'lodash';
import React from 'react';
import Router from 'react-router';
import Resolver from 'react-resolver';

class MyRoutes {
  constructor(handler) {
    this._namedRoutes = {};

    // This is the home route, the parent of all routes
    this.mainRoute = Router.createRoute({
      name: 'main', 
      path: '/', 
      handler: handler});
    Router.createDefaultRoute({parentRoute: this.mainRoute});
  }

  // This is to add a bunch of leaves to the a parent
  // route
  addTree(parentOpts, arr=[]) {
    var parentHandler = this.add(parentOpts);
    _.forEach(arr, (opts) => {
      this.add(opts, parentHandler);
    });
  }

  // Add a single route to the parentHandler (or the main route)
  add(opts={}, parentHandler=null) {
    parentHandler = parentHandler || this.mainRoute;
    _.merge(opts, {parentRoute: parentHandler});

    var route = Router.createRoute(opts);
    this._namedRoutes[route.name] = route;
    return route;
  }

  run(fn) {
    Router.run([this.mainRoute], fn);
    return this;
  }
}

import App from './pages/App';
export const Routes = new MyRoutes(App);

import Home from './pages/Home';
import Login from './pages/Login';