Controllers

Controller

A controller is simply a configuration object that defines a group of related routes and which react components should be rendered for each route. A controller should be defined as follows:

import { Controller } from 'rainier';

const controller: Controller {
  basePath: 'foo',
  routes: [...]
};

export default Controller;

basePath

The basePath property defines a common prefix that will be used for every route defined in the controller. In this example, two routes are defined:

1. /todos/index
2. /todos/show

const controller: Controller = {
  basePath: '/todos',
  routes: [
    {
      paths: ['index']
      View: ...
    },
    {
      paths: ['show']
      View: ...
    }
  ]
};

routes

A route is an object that maps one or more URLs to a single react component (the view). A route object looks like this:

{
  paths: ['index'],
  View: loadable(() => import('../views/todo-index'))
}

paths

The paths field is an array of URLs. Each URL will be pre-pended with the value of basePath at the controller level. Each value in paths will be mapped to the same View.

View

The View field is where a lot of magic happens. First, it must be set to the return value of the loadable function. The loadable function can be imported from rainier, and it is simply a wrapper around the loadable function from the loadable components project. This functions allows the imported react component to be rendered properly on the server for a seamless SSR experience.

The dynamic import of the view will create a separate webpack chunk for the todo-index view. This is what essentially allows for route-based code splitting.