Hilla Documentation

Router Layouts

When using client-side routing, it is possible to compose the page layout without any server intervention. This allows the initial application page, also known as the application shell, to be shown when in offline mode.

Hilla Router allows you to group related routes together under a common parent by using the children property during the configuration:

router.setRoutes([
  {
    path: '',
    component: 'app-layout',
    action: async () => { await import('./views/app-layout-view'); },
    children: [
      {
        path: 'help',
        component: 'app-help',
        action: async () => { await import('./views/app-help-view'); }
      },
      {
        path: 'categories',
        component: 'app-categories',
        action: async () => { await import('./views/app-categories-view'); }
      }
    ]
  }
]);