There is a different router on the server and the router on the client.
Server side router
The server side router definition is defined inside the file src/routes.js
. This file also serves information to the client router (see below).
The routes.js file should be a commonjs file that exports an array of route-objects:
Example src/routes.js
const routes = [
{
method: 'GET',
path: '/',
handler(request, reply) {
const modelOptions = {
bright: true
};
reply.reactview('index', modelOptions);
}
},
{
method: 'GET',
path: '/help',
handler(request, reply) {
reply.reactview('help');
}
},
{
method: 'PUT',
path: '/send-myform',
handler: function (request, reply) {
reply.action('process-myform');
}
}
];
module.exports = routes;
itsa-react-server uses Hapi.js docs --> the routes structure follows the principles of Hapi. However, itsa-react-server has defined additional reply
methods that your app should be using:
Additional reply-methods
Itsa-server makes sure that the reply-object has three additional methods:
- reactview() <-- response the specified view
- assets() <-- responses a file (by Inert) from the
/assets
folder - action() <-- performs a specific action, used to handle ajax-request (see Actions)
- setBodyDataAttr() <-- sets data attributes to the body-element. (additional to the
body-data-attr
cookie)
Client side router
All relevant router-data, those routes that reply with reply.reactview()
, is automatically available on the client by src/app.js
. This App
is always running on the client. The client App has a property this.router
, with manages clientside routing. Behind the scenes, the client app will inspect anchor-clicks (delegated), prevent default-action whenever there is a match with the server’s routes.js
and makes an ajax-request if so.