---
url: /api/symbols/workbox-swkit/routing/navigationroute.md
---

# NavigationRoute

Class @vite-pwa/workbox-swkit/routing

NavigationRoute makes it easy to create a
workbox-routing.Route that matches for browser
\[navigation requests]https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests.

It will only match incoming Requests whose
https://fetch.spec.whatwg.org/#concept-request-mode|mode
is set to `navigate`.

You can optionally only apply this route to a subset of navigation requests
by using one or both of the `denylist` and `allowlist` parameters.

## Constructor

```ts
new NavigationRoute(handler: RouteHandler, options: NavigationRouteMatchOptions)
```

If both `denylist` and `allowlist` are provided, the `denylist` will
take precedence and the request will not match this route.

The regular expressions in `allowlist` and `denylist`
are matched against the concatenated
\[`pathname`]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
and \[`search`]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search
portions of the requested URL.

Note\*: These RegExps may be evaluated against every destination URL during
a navigation. Avoid using
[complex RegExps](https://github.com/GoogleChrome/workbox/issues/3077),
or else your users may see delays when navigating your site.

**Parameters**

* `handler` – A callback
  function that returns a Promise resulting in a Response.

## Properties

## Methods

### setCatchHandler()

```ts
setCatchHandler(handler: RouteHandler): void
```

**Parameters**

* `handler` – A callback
  function that returns a Promise resolving to a Response