Router Containers

In order to use a router in an application, it must be attached to the DOM with a router container. Router containers are provided by the lwr-router-container component.

A router container provides navigation context. This means that the router container is responsible for processing all navigation wires and events from its descendants in the DOM. In the following example, those descendants are my-nav and lwr-outlet.

A router container requires a router, and it 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().

onpostnavigate

  • Dispatched when a navigation event has completed.

  • event.detail is a DomRoutingMatch for the current location.

onerrornavigate

  • Dispatched when there is an error processing a navigation event. (For example, no RouteDefinition match or prenavigate cancelation.)

  • event.detail is a MessageObject.

Simple Client-Side Routing: Create a Router demonstrates how to attach a router instance to a router container.