Hapi route handler that makes react-router your isomorphic server side router.
Quorra is sponsored by Pebble{code}
Example
To run the example code, first do npm install @tanepiper/quorra to install all dependencies, then run the following commands:
> npm run webpack
> npm run example
Now go to http://localhost:9000 in your browser to see an isomorphic example.
Usage
server.register([{
register: require('@tanepiper/quorra')
}], (error) => {
if (error) {
throw error;
}
server.route({
method: 'GET',
path: '/{route*}',
handler: {
react: {
relativeTo: `${__dirname}/app`,
router: 'routes.js',
layout: 'layout.jsx' || 'myLayoutMethod',
props: {
'/': 'myIndexMethod',
'/about': 'myAboutMethod'
}
}
}
});
});
Options
-
relativeTo: The path to where your react-router application is located -
router: The router file that defines your routes and components -
layout: Either a path to a layout jsx file, or a method name that generates HTML -
props: An object or function that returns a mapping of paths to methods that return data. This uses Hapi's in-buildserver.methods
Router.js might look something like:
const App = require('./../components/App.jsx');
const About = require('./../components/App.jsx');
const Goodbye = require('./../components/App.jsx');
const Hello = require('./../components/App.jsx');
const Links = require('./../components/Links.jsx');
module.exports = [{
path: '/', component: App, indexRoute: { component: Links }
}, {
path: '/about', component: About, indexRoute: { component: Links }
}, {
path: '/hello', component: Hello, indexRoute: { component: Links }
}, {
path: '/goodbye', component: Goodbye, indexRoute: { component: Links }
}];
Layout.jsx mighht look something like:
'use strict';
const React = require('react');
const Layout = React.createClass({
displayName: 'Layout',
render() {
return (
<html>
<head>
<title>{this.props.title || "Hapi React Handler"}</title>
</head>
<body>
<div className="container" id="app-mount" dangerouslySetInnerHTML={{ __html: this.props.content }}></div>
<script id="app-state" dangerouslySetInnerHTML={{ __html: this.props.state }}></script>
</body>
</html>
);
}
});
module.exports = Layout;