How to separate the new 0.2 style router from the jsx renderComponent?

[toranb]

I've been following along w/ the changes recently from 0.1.0 and one thing I liked about the initial router is that I could create it /export it as a module and then in my index.html I could kick off the React.renderComponent (making a clean separation from the module itself). This was nice because my tests could just import the module (like my index.html did) and add it to a fake dom / etc

var router = Router(
    Route({handler:App},
        Route({name:"dashboard", path:"dashboard", handler:PreDashboard},
            Route({name:"inbox", path:"dashboard/inbox", handler:PreInbox})
        )
    )
);
export default router;

System.import('app/router').then(function(router) {
    router['default'].renderComponent(document.body);
});

In the new syntax I'm not sure how I'd do something similar because it doesn't look like I have an "export friendly" module as I did before. I'm sure you guys are thinking about testability as you move through this refactor of the api, but how can I do what I was previously in the new version? (to enable testability)

React.renderComponent((
  <Route handler={App}>
  </Route>
), document.body);

[ryanflorence]

It seems weird at first, but eventually it feels normal to use jsx as expressions.

var blah = <h1>lol</h1>

So just do that for your route config:

/** @jsx React.DOM */
var Route = require('react-nested-router').Route;

module.exports = (
  <Route location="history" handler={require('../components/app')}>
    <Route name="foo" handler={require('../components/foo')} />
    <Route name="bar" path="/what/evz" handler={require('../components/bar')} />
    <Route name="index" path="/" handler={require('../components/index')} />
  </Route>
);

https://github.com/rpflorence/react-boilerplate/blob/master/app/config/routes.js

[toranb]

Thanks Ryan!