# PageReference

An LWR router receives navigation events as page references. Page references are a JSON-format specification of a location. You pass a `PageReference` object to the router via the [`navigate` API](/docs/platform/lwr/references/csr-reference/navigate.md).

## Syntax

```sfdocs-code {"lang":"javascript", "title": "", "src": "" }
interface PageReference {
  type: string;
  attributes: { [key: string]: string | null };
  state: { [key: string]: string | null };
}
```

## Properties

| Property     | Type   | Required/Optional | Description                                                                                              |
| ------------ | ------ | ----------------- | -------------------------------------------------------------------------------------------------------- |
| `type`       | string | Required          | An identifier that's a user-defined expression.                                                          |
| `attributes` | array  | Required          | An array of user-defined key-value pairs. If there are no attribute values, set this property to `null`. |
| `state`      | array  | Required          | An array of user-defined key-value pairs. If there are no attribute values, set this property to `null`. |

## Example

```sfdocs-code {"lang":"javascript", "title": "", "src": "" }
// URI
https://www.somewhere.com/animals/abc?view=compact&dark-mode

// page reference
{
    "type": "animal_page",
    "attributes": {
        "animalId": "abc"
    },
    "state": {
        "view": "compact",
        "dark-mode": ""
    }
}
```

**See Also**

- [Route Handler Modules](/docs/platform/lwr/guide/lwr-route-handler-modules.md#3-the-router-passes-routeinstance-to-routehandlerupdate)
- [Simple Routing Example: Navigate](/docs/platform/lwr/guide/lwr-routing-example-simple.md#navigate)