authenticated-routes.js

var Authenticated = React.createClass({
  statics: {
    willTransitionTo (transition) {
      if (!authenticated()) {
        transition.redirect('login');
      }
    }
  }
});

var routes = (
  <Route handler={App}>
    <Route handler={Authenticated}>
      // put all authenticated routes here, since we don't require
      // paths on routes, it won't mess with the url
    </Route>
    <Route handler={Public}>
      // ...
    </Route>
  </Route>
);

👍

I assume you meant:

var Authenticated = React.createClass({
  statics: {
    willTransitionTo: function(transition) {
      if (!authenticated()) {
        transition.redirect('login');
      }
    }
  }
});

In which case you get Uncaught Error: Invariant Violation: createClass(...): Class specification must implement arendermethod. :(

Returning a RouteHandler will work.

render() {
    return <RouteHandler />
  }

In this case routes order make sense. Authenticated handler will block Public group when auth hasn't been done yet as it intercepts the routing flow.