---
schema_version: "1"
id: 87cfbf355f8a4a4aa3236d5c7ca99ed9f43dd0ed1968b22521c5c8f592cf4210
title: Outlets
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-outlets.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-outlets.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 70121a42d3dd2ea13f42a91e994708163d19c9684125b4f1a18ed7fc40dfd612
products:
  - Lightning Web Runtime
---
# 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.

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

```
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:

```
<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.html) and APIs, along with [`NavigationMixin`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigationmixin.html). This allows you to write a component once and use it anywhere that supports the `lightning/navigation` contracts.