lwr-router-container

A router container provides navigation context by processing all navigation wires and events from its descendants in the DOM.

Properties

Property	Type	Required/Optional	Description
`router`	Router object	Optional	Obtained from the `createRouter()` API.
`history-disabled`	Boolean	Optional	Set `history-disabled` to `true` if your router container shouldn't alter the browser's History API during navigation events or location changes.

Syntax

<lwr-router-container
  router="{router}"
  <!-- Event handlers -->
  onhandlenavigation="{handleNavigation}"
  onprenavigate="{preNavigate}"
  onpostnavigate="{postNavigate}"
  onerrornavigate="{errorNavigate}"
>
  <my-nav></my-nav>
  <lwr-outlet></lwr-outlet>
</lwr-router-container>

Returns

A router container fires these events:

onhandlenavigation
- Dispatched when navigate(pageRef) is called. event.preventDefault() cancels the navigation event. event.detail is the PageReference.
onprenavigate
- Dispatched when a navigation event is received and a RouteDefinition match is found. event.preventDefault() cancels the navigation event. event.detail is a RouteChange object.
```
interface RouteChange {
  current?: DomRoutingMatch; // the current location info
  next: DomRoutingMatch; // location info for the incoming nav event
}
```

onpostnavigate

Dispatched when a navigation event has completed. event.detail is a DomRoutingMatch object for the current location.

interface DomRoutingMatch {
  url: string; // e.g. "/recipes/desserts/010?units=metric&yummy=yes"
  route: RouteInstance;
  routeDefinition: RouteDefinition;
}

onerrornavigate
- Dispatched when there's an error processing a navigation event. (For example, no RouteDefinition match or a prenavigate cancellation.) event.detail is a MessageObject.
```
interface MessageObject {
  code: string | number;
  message: string;
  level: number; // Fatal = 0, Error = 1, Warning = 2, Log = 3
}
```

See Also

Simple Routing Example: Navigate