lwr-router-container

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

1<lwr-router-container
2  router="{router}"
3  <!-- Event handlers -->
4  onhandlenavigation="{handleNavigation}"
5  onprenavigate="{preNavigate}"
6  onpostnavigate="{postNavigate}"
7  onerrornavigate="{errorNavigate}"
8>
9  <my-nav></my-nav>
10  <lwr-outlet></lwr-outlet>
11</lwr-router-container>

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.

    1interface RouteChange {
    2  current?: DomRoutingMatch; // the current location info
    3  next: DomRoutingMatch; // location info for the incoming nav event
    4}

• onpostnavigate

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

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

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

    1interface MessageObject {
    2  code: string | number;
    3  message: string;
    4  level: number; // Fatal = 0, Error = 1, Warning = 2, Log = 3
    5}

See Also

• Simple Routing Example: Navigate