# Nested and lazy routes

Source: https://signy.dev/documentation/1/router/nested-and-lazy-routes/

Layouts inside layouts, and pages loaded on demand.

## Nested routes

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

```js
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`.

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

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