Hilla Documentation

Defining Routes

Defining client-side TypeScript routes and server-side Java routes in a Hilla application.

Routes for views or sub-views are defined in the routes.ts file.

import { Route } from '@vaadin/router';
import './views/helloworld/hello-world-view'; // (1)
import './views/main-layout';


export const views: Route[] = [
  {
    path: '',
    component: 'hello-world-view', // (2)
    title: '',
  },
  {
    path: 'hello',
    component: 'hello-world-view',
    title: 'Hello World',
  },
  {
    path: 'about',
    component: 'about-view',
    title: 'About',
    action: async () => await import('./views/about/about-view'), // (3)
  },
];

export const routes: Route[] = [
  {
    path: '',
    component: 'main-layout',
    children: [...views], // (4)
  },
];
  1. Import views in routes.ts to include them in the main bundle. You should only include those views that are needed on startup to keep the JavaScript bundle size as small as possible.

  2. Map view tag names to paths in the route definition object.

  3. Use dynamic imports to import other views. This way, the views and their dependencies will only get downloaded if the user navigates to the view.

  4. Optional: define a main layout for things like header, footer, and navigation. Include the views as children.

Initializing the Router

The router is initialized in index.ts using the routes defined in routes.ts.

import { Router } from '@vaadin/router';
import { routes } from './routes';

export const router = new Router(document.querySelector('#outlet')); // (1)

router.setRoutes(routes); // (2)
  1. Create a new Router instance that outputs its content into the element that has the id outlet in index.html.

  2. Register the routes defined in routes.ts with the Router.