usage with react-router?

[paOol]

I was able to get the example view.jsx file to show by putting this in my handler.

reply.view(view, { title : 'test' })

but here is whats confusing. view.jsx doesn't have the usual React.render ( "< Component />", 'div');

Is there a working example with react router?

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

[jedireza]

Thanks for opening an issue. These are interesting topics.

I suggest checking out Aqua and see how we're using hapi-react-views to render simple views. This has the expected usage of this module.

Is there a working example with react router?

Using react-router server-side would typically be used to make your app isomorphic. Instead of mounting the Handler returned to us when calling Router.run(...), we'd render that Handler into a string and send that string as the response.

In this case (server-side rendering), I don't see using hapi-react-views as part of the solution. This is because you'll have already need to include the Routes component you'd pass to Router.run(Routes, ...), and the Routes component would have references to all the component handlers.

Some back of the napkin code would be something like:

var Routes = require('../../client/pages/login/Routes.jsx');

exports.register = function (plugin, options, next) {

    plugin.route({
        method: 'GET',
        path: '/login',
        handler: function (request, reply) {

            Router.run(Routes, request.url.path, function (Handler) {

                var props = {/* something, maybe nothing */};
                var component = React.createElement(Handler, props);
                var html = React.renderToString(component);
                reply(options.doctype + html);
            });
        }
    });

    next();
};

exports.register.attributes = {
    name: 'web/login'
};

Again, that's just some sample code. Fully executing on an isomorphic implementation, requires more considerations. In the case of a Flux app; the mount point on the client, handling your dispatcher+stores in a way they don't bleed data across connections (since they're singletons by default) and knowing when your actions are done firing so you can send the response after you have fully rendered views. Then you need to mount on the client so you're back in business in the browser.

---

I've haven't used it myself, but you may also want to take a look at hapi-react-router. There don't seem to be much documentation for it yet though.