# Outlets

An **outlet** dynamically renders view components. A view is the component to display when the application navigates to a location.

This process is naturally lazy: the view isn't imported until the outlet consumes it, so any unused views aren't fetched. When the router's view state changes, the outlet is flagged to display the view. Then, if the view module hasn't already been fetched, there may be an asynchronous process to retrieve it.

```sfdocs-code {"lang":"html", "title": "my/app/app.html", "src": "" }
<template>
    <lwr-router-container>
        <lwr-outlet refocus-off onviewchange={onViewChange} onviewerror={onViewError}>
            <div slot="error">View component cannot display</div>
        </lwr-outlet>
    </lwr-router-container>
</template>
```

A route handler module can return multiple views.

```sfdocs-code {"lang":"javascript", "title": "", "src": "" }
import type { Module, RouteHandlerCallback } from "lwr/router";

export default class HomeHandler {
  callback: RouteHandlerCallback;

  constructor(callback: RouteHandlerCallback) {
    this.callback = callback;
  }

  dispose(): void {}

  update(): void {
    this.callback({
      viewset: {
        // return multiple views
        default: (): Promise<Module> => import("my/home"),
        nav: (): Promise<Module> => import("my/homeNav"),
        footer: (): Promise<Module> => import("my/homeInfo"),
      },
    });
  }
}
```

You can use multiple outlets to display all the current view components by setting different `view-name` values:

```sfdocs-code {"lang":"html", "title": "my/app/app.html", "src": "" }
<template>
  <lwr-router-container>
    <lwr-outlet view-name="nav"></lwr-outlet>
    <lwr-outlet><!-- default view --></lwr-outlet>
    <lwr-outlet view-name="footer"></lwr-outlet>
  </lwr-router-container>
</template>
```

## Lightning Navigation

The `@lwrjs/router` package provides an implementation of `lightning/navigation`. The `lightning/navigation` module is an alias for the `lwr/navigation` module, so it includes the same [wires](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/lwr-navigation-wires.md) and APIs, along with [`NavigationMixin`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigationmixin.md). This allows you to write a component once and use it anywhere that supports the `lightning/navigation` contracts.