Nested and lazy routes

Nested routes

A route with children renders its component, and that component renders the matched child in its own Outlet.

const appRouter = router({
  routes: [
    {
      path: '/settings',
      component: SettingsLayout,
      children: [
        { path: '', component: Profile },
        { path: 'security', component: Security },
      ],
    },
  ],
});

class SettingsLayout extends Component {
  protected render() {
    return html`
      <aside>
        <${Link} to="/settings">Profile</${Link}>
        <${Link} to="/settings/security">Security</${Link}>
      </aside>
      <section><${Outlet} /></section>
    `;
  }
}

Lazy routes

lazyRoute() loads a route's component the first time it is visited, so a bundler can split it into its own chunk. The module exports the component as default.

{ path: '/reports', component: lazyRoute(() => import('./pages/reports')) }

preloadRoutes() loads lazy routes ahead of time, such as when the browser is idle.