---
schema_version: "1"
id: d3572aa9c14c3c3fc9912c384a5d6adb33bfd51bf4a8d217ff2c2d5f33b04492
title: lwr-router-container
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/references/csr-reference/lwr-router-container.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/lwr-router-container.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c9936ff7896e111e916e19faa675429491c36ea6de9275e8e8a48d90a0cf8a39
products:
  - Lightning Web Runtime
---
# lwr-router-container

A [router container](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-router-containers.md) provides navigation context by processing all [navigation wires](https://developer.salesforce.com/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](https://developer.salesforce.com/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

```
<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)`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigate.md) is called. `event.preventDefault()` cancels the navigation event. `event.detail` is the [`PageReference`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/pagereference.md).
- `onprenavigate`

  - Dispatched when a navigation event is received and a [`RouteDefinition`](https://developer.salesforce.com/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](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-routing-example-simple.md#navigate)