Router

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.

OFFLINE