---
schema_version: "1"
id: 289453225853a7ba9ad1e4ce30c53383f4370266a8cc8e8a65ebee778bfb1aad
title: PageReference
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/references/csr-reference/pagereference.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/pagereference.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f39a295642c76b208ee846947fe96ce3061eca5fd5e1c6184fa6782da8655064
products:
  - Lightning Web Runtime
---
# 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](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigate.md).

## Syntax

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

```
// 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](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-route-handler-modules.md#3-the-router-passes-routeinstance-to-routehandlerupdate)
- [Simple Routing Example: Navigate](/docs/platform/lwr/guide/lwr-routing-example-simple.html#navigate)