# lwr-router-container

A [router container](/docs/platform/lwr/guide/lwr-router-containers.md) provides navigation context by processing all [navigation wires](/docs/platform/lwr/references/csr-reference/lwr-navigation-wires.md) and events from its descendants in the DOM.

## Properties

| Property           | Type          | Required/Optional | Description                                                                                                                                                                                                       |
| ------------------ | ------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `router`           | Router object | Optional          | Obtained from the [`createRouter()` API](/docs/platform/lwr/references/csr-reference/createrouter.md).                                                                                                            |
| `history-disabled` | Boolean       | Optional          | Set `history-disabled` to `true` if your router container shouldn't alter the browser's [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) during navigation events or location changes. |

## Syntax

```sfdocs-code {"lang":"", "title": "", "src": "" }
<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)`](/docs/platform/lwr/references/csr-reference/navigate.md) is called. `event.preventDefault()` cancels the navigation event. `event.detail` is the [`PageReference`](/docs/platform/lwr/references/csr-reference/pagereference.md).

- `onprenavigate`

  - Dispatched when a navigation event is received and a [`RouteDefinition`](/docs/platform/lwr/references/csr-reference/routedefinition.md) match is found. `event.preventDefault()` cancels the navigation event. `event.detail` is a `RouteChange` object.

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

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

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

**See Also**

- [Simple Routing Example: Navigate](/docs/platform/lwr/guide/lwr-routing-example-simple.md#navigate)