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 and APIs, along with NavigationMixin. This allows you to write a component once and use it anywhere that supports the lightning/navigation contracts.