# [API](/api/) › @qwik.dev/qwik-router

## Action

```typescript
export type Action<
  RETURN,
  INPUT = Record<string, unknown>,
  OPTIONAL extends boolean = true,
> = {
  (): ActionStore<ExcludeControlFlow<RETURN>, INPUT, OPTIONAL>;
};
```

**References:** [ActionStore](#actionstore), [ExcludeControlFlow](#excludecontrolflow)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ActionConstructor

```typescript
export type ActionConstructor = {
  <
    OBJ extends Record<string, any> | void | null,
    VALIDATOR extends TypedDataValidator,
    REST extends [DataValidator, ...DataValidator[]],
  >(
    actionQrl: (
      data: GetValidatorOutputType<VALIDATOR>,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options: ActionOptions & {
      readonly validation: [VALIDATOR, ...REST];
    },
  ): Action<
    StrictUnion<
      | OBJ
      | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
      | FailReturn<FailOfRest<REST>>
    >,
    GetValidatorInputType<VALIDATOR>,
    false
  >;
  <
    OBJ extends Record<string, any> | void | null,
    VALIDATOR extends TypedDataValidator,
  >(
    actionQrl: (
      data: GetValidatorOutputType<VALIDATOR>,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options: ActionOptions & {
      readonly validation: [VALIDATOR];
    },
  ): Action<
    StrictUnion<
      OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
    >,
    GetValidatorInputType<VALIDATOR>,
    false
  >;
  <
    OBJ extends Record<string, any> | void | null,
    REST extends [DataValidator, ...DataValidator[]],
  >(
    actionQrl: (
      data: JSONObject,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options: ActionOptions & {
      readonly validation: REST;
    },
  ): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
  <
    OBJ extends Record<string, any> | void | null,
    VALIDATOR extends TypedDataValidator,
    REST extends [DataValidator, ...DataValidator[]],
  >(
    actionQrl: (
      data: GetValidatorOutputType<VALIDATOR>,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options: VALIDATOR,
    ...rest: REST
  ): Action<
    StrictUnion<
      | OBJ
      | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
      | FailReturn<FailOfRest<REST>>
    >,
    GetValidatorInputType<VALIDATOR>,
    false
  >;
  <
    OBJ extends Record<string, any> | void | null,
    VALIDATOR extends TypedDataValidator,
  >(
    actionQrl: (
      data: GetValidatorOutputType<VALIDATOR>,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options: VALIDATOR,
  ): Action<
    StrictUnion<
      OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
    >,
    GetValidatorInputType<VALIDATOR>,
    false
  >;
  <
    OBJ extends Record<string, any> | void | null,
    REST extends [DataValidator, ...DataValidator[]],
  >(
    actionQrl: (
      form: JSONObject,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    ...rest: REST
  ): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
  <OBJ>(
    actionQrl: (
      form: JSONObject,
      event: RequestEventAction,
    ) => ValueOrPromise<OBJ>,
    options?: ActionOptions,
  ): Action<StrictUnion<OBJ>>;
};
```

**References:** [TypedDataValidator](#typeddatavalidator), [DataValidator](#datavalidator), [GetValidatorOutputType](#getvalidatoroutputtype), [ActionOptions](#actionoptions), [Action](#action), [StrictUnion](#strictunion), [FailReturn](#failreturn), [ValidatorErrorType](#validatorerrortype), [GetValidatorInputType](#getvalidatorinputtype), [FailOfRest](#failofrest), [JSONObject](#jsonobject)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ActionOptions

```typescript
export type ActionOptions = {
  readonly id?: string;
  readonly validation?: DataValidator[];
  readonly invalidate?: Loader<any>[];
};
```

**References:** [DataValidator](#datavalidator), [Loader](#loader_2)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ActionReturn

```typescript
export type ActionReturn<RETURN> = {
  readonly status?: number;
  readonly value: RETURN;
};
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ActionStore

```typescript
export type ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true> = {
  readonly actionPath: string;
  readonly isRunning: boolean;
  readonly status?: number;
  readonly formData: FormData | undefined;
  readonly value: RETURN | undefined;
  readonly submit: QRL<
    OPTIONAL extends true
      ? (form?: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
      : (form: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
  >;
  readonly submitted: boolean;
};
```

**References:** [ActionReturn](#actionreturn)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## CacheKeyFn

Cache key function. Used by `routeConfig.cacheKey` (SSR HTML cache) and by `routeLoader$`'s `cacheKey` option (per-loader JSON cache).

- `true`: use the surface's default key.

- SSR default: `${status}|${eTag}|${pathname}` when an eTag is set, otherwise `${status}|${pathname}`. - Loader default: `${pathname}|${filteredSearch}|${loaderId}|${eTag}` when an eTag is set, otherwise `${pathname}|${filteredSearch}|${loaderId}`. - Function: receives the request event and the normalized, unquoted eTag (or an empty string when none was provided). Return the cache key string, or `null` or `''` to skip caching for this request. Loader callbacks receive the loader-scoped request event, with `url`, `query`, and `request.url` filtered by the loader's `search` allowlist.

Note: valid cacheKeys are non-empty strings.

```typescript
export type CacheKeyFn =
  | true
  | ((requestEv: RequestEvent, eTag: string) => string | null);
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ContentHeading

```typescript
export interface ContentHeading
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| id | `readonly` | string |  |
| level | `readonly` | number |  |
| text | `readonly` | string |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ContentMenu

```typescript
export interface ContentMenu
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| href? | `readonly` | string | _(Optional)_ |
| items? | `readonly` | [ContentMenu](#contentmenu)[] | _(Optional)_ |
| text | `readonly` | string |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ContentModuleETag

The eTag export type for routeConfig.

- `string` — static ETag value. - `(props: DocumentHeadProps) => string | null` — compute the ETag from route context (params, URL, loaded data via `resolveValue`, etc.). Return `null` to skip eTag for this request.

Qwik normalizes eTag values by stripping weak-form `W/` prefixes, quotes, and forbidden chars, then sends a strong `ETag` header. Values that normalize to an empty string are treated as absent.

When set (and a value is produced), the server includes an `ETag` header and returns `304` if `If-None-Match` matches.

```typescript
export type ContentModuleETag =
  | string
  | ((props: DocumentHeadProps) => string | null);
```

**References:** [DocumentHeadProps](#documentheadprops)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ContentModuleHead

```typescript
export type ContentModuleHead = DocumentHead | ResolvedDocumentHead;
```

**References:** [DocumentHead](#documenthead), [ResolvedDocumentHead](#resolveddocumenthead)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## createRenderer

Creates the `render()` function that is required by `createQwikRouter()`. It requires a function that returns the `jsx` and `options` for the renderer.

```typescript
createRenderer: (
  getOptions: (options: RendererOptions) => {
    jsx: JSXOutput;
    options: RendererOutputOptions;
  },
) => Render;
```

| Parameter | Type | Description |
| --- | --- | --- |
| getOptions | (options: [RendererOptions](#rendereroptions)) => \{ jsx: JSXOutput; options: [RendererOutputOptions](#rendereroutputoptions); } |  |

**Returns:**

Render

```tsx
const renderer = createRenderer((opts) => {
  if (opts.requestHeaders["x-hello"] === "world") {
    return { jsx: <Hello />, options: opts };
  }
  return {
    jsx: <Root />,
    options: {
      ...opts,
      serverData: {
        ...opts.serverData,
        documentHead: {
          meta: [{ name: "renderedAt", content: new Date().toISOString() }],
        },
      },
    },
  };
});
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/create-renderer.ts)

## DataValidator

```typescript
export type DataValidator<T extends Record<string, any> = {}> = {
  validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
};
```

**References:** [ValidatorReturn](#validatorreturn)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentHead

```typescript
export type DocumentHead =
  | DocumentHeadValue
  | ((props: DocumentHeadProps) => DocumentHeadValue);
```

**References:** [DocumentHeadValue](#documentheadvalue), [DocumentHeadProps](#documentheadprops)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentHeadProps

```typescript
export interface DocumentHeadProps extends RouteLocation
```

**Extends:** [RouteLocation](#routelocation)

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| head | `readonly` | [ResolvedDocumentHead](#resolveddocumenthead) |  |
| resolveValue | `readonly` | ResolveSyncValue |  |
| status | `readonly` | number | The HTTP status code of the response (e.g. 200, 404). |
| withLocale | `readonly` | <T>(fn: () => T) => T |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentHeadTags

This renders all the tags collected from `head`.

You can partially override the head, for example if you want to change the title:

```tsx
import { DocumentHeadTags, useDocumentHead } from "@qwik.dev/router";

export default component$(() => {
  const head = useDocumentHead();
  return <DocumentHeadTags title={`${head.title} - My App`} />;
});
```

You don't have to use this component, you can also do it yourself for full control. Just copy the code from this component and modify it to your needs.

Note that this component normally only runs once, during SSR. You can use Signals in your `src/root.tsx` to make runtime changes to `<head>` if needed.

```typescript
DocumentHeadTags: import("@qwik.dev/core").Component<
  DocumentHeadValue<Record<string, unknown>>
>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/document-head-tags-component.tsx)

## DocumentHeadValue

```typescript
export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| frontmatter? | `readonly` | Readonly<FrontMatter> | _(Optional)_ Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. |
| links? | `readonly` | readonly [DocumentLink](#documentlink)[] | _(Optional)_ Used to manually append `` elements to the ``. |
| meta? | `readonly` | readonly [DocumentMeta](#documentmeta)[] | _(Optional)_ Used to manually set meta tags in the head. |
| scripts? | `readonly` | readonly [DocumentScript](#documentscript)[] | _(Optional)_ Used to manually append `` elements to the ``. |
| styles? | `readonly` | readonly [DocumentStyle](#documentstyle)[] | _(Optional)_ Used to manually append `` elements to the ``. |
| title? | `readonly` | string | _(Optional)_ Sets `document.title`. |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentLink

```typescript
export type DocumentLink = QwikIntrinsicElements["link"];
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentMeta

```typescript
export type DocumentMeta = QwikIntrinsicElements["meta"];
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentScript

```typescript
export type DocumentScript = (
  | (Omit<QwikIntrinsicElements["script"], "dangerouslySetInnerHTML"> & {
      props?: never;
    })
  | {
      key?: string;
      props: Readonly<QwikIntrinsicElements["script"]>;
    }
) &
  (
    | {
        script?: string;
        dangerouslySetInnerHTML?: never;
      }
    | {
        dangerouslySetInnerHTML?: string;
        script?: never;
      }
  );
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## DocumentStyle

```typescript
export type DocumentStyle = Readonly<
  (
    | (Omit<QwikIntrinsicElements["style"], "dangerouslySetInnerHTML"> & {
        props?: never;
      })
    | {
        key?: string;
        props: Readonly<QwikIntrinsicElements["style"]>;
      }
  ) &
    (
      | {
          style?: string;
          dangerouslySetInnerHTML?: never;
        }
      | {
          dangerouslySetInnerHTML?: string;
          style?: never;
        }
    )
>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ErrorBoundary

```typescript
ErrorBoundary: import("@qwik.dev/core").Component<ErrorBoundaryProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/error-boundary.tsx)

## ExcludeControlFlow

Drops control-flow signals (`ev.redirect()`, `ev.error()`, etc.) from a loader/action return type: those are thrown, not surfaced as data. `ev.fail()` is plain data and is kept.

```typescript
export type ExcludeControlFlow<T> = Exclude<T, AbortMessage | ServerError>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## FailOfRest

```typescript
export type FailOfRest<REST extends readonly DataValidator[]> =
  REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
```

**References:** [DataValidator](#datavalidator)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## FailReturn

```typescript
export type FailReturn<T> = T & Failed;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## Form

```typescript
Form: <O, I>(input: FormProps<O, I>, key: string | null) =>
  import("@qwik.dev/core").JSXOutput;
```

| Parameter | Type | Description |
| --- | --- | --- |
| \{ action, spaReset, reloadDocument, onSubmit$, ...rest } | (not declared) |  |
| input | [FormProps](#formprops)<O, I> |  |
| key | string \\| null |  |

**Returns:**

import("@qwik.dev/core").JSXOutput

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/form-component.tsx)

## FormProps

```typescript
export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
```

**Extends:** Omit&lt;QwikJSX.IntrinsicElements['form'], 'action' \| 'method'&gt;

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| action? |  | [ActionStore](#actionstore)<O, I, true \\| false> | _(Optional)_ Reference to the action returned by `action()`. |
| key? |  | string \\| number \\| null | _(Optional)_ |
| onSubmitCompleted$? |  | QRLEventHandlerMulti<CustomEvent<[FormSubmitCompletedDetail](#formsubmitsuccessdetail)<O>>, HTMLFormElement> \\| undefined | _(Optional)_ Event handler executed right after the action is executed successfully and returns some data. |
| reloadDocument? |  | boolean | _(Optional)_ When `true` the form submission will cause a full page reload, even if SPA mode is enabled and JS is available. |
| spaReset? |  | boolean | _(Optional)_ When `true` all the form inputs will be reset in SPA mode, just like happens in a full page form submission. Defaults to `false` |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/form-component.tsx)

## FormSubmitSuccessDetail

```typescript
export interface FormSubmitCompletedDetail<T>
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| status |  | number |  |
| value |  | T |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/form-component.tsx)

## getRequestEvent

Returns the current RequestEvent if possible. Only usable on the server, and only during request processing.

```typescript
getRequestEvent: (thisArg?: unknown) => RequestEvent | undefined;
```

| Parameter | Type | Description |
| --- | --- | --- |
| thisArg | unknown | _(Optional)_ |

**Returns:**

RequestEvent \| undefined

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/route-loaders.ts)

## GetValidatorInputType

```typescript
export type GetValidatorInputType<VALIDATOR extends TypedDataValidator> =
  VALIDATOR extends ValibotDataValidator<infer TYPE>
    ? v.InferInput<TYPE>
    : VALIDATOR extends ZodDataValidator<infer TYPE>
      ? z.input<TYPE>
      : never;
```

**References:** [TypedDataValidator](#typeddatavalidator)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## GetValidatorOutputType

```typescript
export type GetValidatorOutputType<VALIDATOR extends TypedDataValidator> =
  VALIDATOR extends ValibotDataValidator<infer TYPE>
    ? v.InferOutput<TYPE>
    : VALIDATOR extends ZodDataValidator<infer TYPE>
      ? z.output<TYPE>
      : never;
```

**References:** [TypedDataValidator](#typeddatavalidator)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## GetValidatorType

```typescript
export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
  GetValidatorOutputType<VALIDATOR>;
```

**References:** [TypedDataValidator](#typeddatavalidator), [GetValidatorOutputType](#getvalidatoroutputtype)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## globalAction$

```typescript
globalAction$: ActionConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## HttpErrorProps

```typescript
export type HttpStatus = {
  status: number;
  message: string;
};
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## JSONObject

```typescript
export type JSONObject = {
  [x: string]: JSONValue;
};
```

**References:** [JSONValue](#jsonvalue)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## JSONValue

```typescript
export type JSONValue =
  | string
  | number
  | boolean
  | {
      [x: string]: JSONValue;
    }
  | Array<JSONValue>;
```

**References:** [JSONValue](#jsonvalue)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## Link

```typescript
Link: import("@qwik.dev/core").Component<LinkProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/link-component.tsx)

## LinkProps

```typescript
export interface LinkProps extends AnchorAttributes
```

**Extends:** AnchorAttributes

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| prefetch? |  | boolean \\| 'js' | _(Optional)_ |
| prefetchBundles? |  | [PrefetchStrategy](#prefetchstrategy) | _(Optional)_ Controls when Qwik should prefetch the javascript bundles required to render this \*\*`Link`\*\* target during client-side navigation. Defaults to \*\*`"visible"`\*\*. Prefetching will not occur if the user has the \*\*data saver\*\* setting enabled. |
| prefetchData? |  | [PrefetchStrategy](#prefetchstrategy) | _(Optional)_ Controls when Qwik should prefetch and cache route data for this \*\*`Link`\*\* target, including invoking any \*\*`routeLoader$`\*\*, \*\*`onGet`\*\*, etc. Defaults to \*\*`"intent"`\*\*. When using the deprecated \*\*`prefetch="js"`\*\* prop, route data prefetching defaults to \*\*`"off"`\*\*. Prefetching route data can improve client-side navigation performance for pages that wait on loaders, server handlers, databases, or API calls. Prefetching will not occur if the user has the \*\*data saver\*\* setting enabled. |
| reload? |  | boolean | _(Optional)_ |
| replaceState? |  | boolean | _(Optional)_ |
| scroll? |  | boolean | _(Optional)_ |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/link-component.tsx)

## Loader_2

```typescript
export type Loader<RETURN> = {
  (): LoaderSignal<ExcludeControlFlow<RETURN>>;
};
```

**References:** [LoaderSignal](#loadersignal), [ExcludeControlFlow](#excludecontrolflow)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## LoaderSignal

```typescript
export type LoaderSignal<TYPE> = (TYPE extends () => ValueOrPromise<
  infer VALIDATOR
>
  ? Signal<ValueOrPromise<VALIDATOR>>
  : Signal<TYPE>) &
  Pick<ComputedSignal<any>, "promise" | "pending" | "error" | "loading">;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## NavigationType_2

```typescript
export type NavigationType = "initial" | "form" | "link" | "popstate";
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## omitProps

> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Creates a new object from `obj` by omitting a set of `keys`.

```typescript
export declare function omitProps<T, KEYS extends keyof T>(
  obj: T,
  keys: KEYS[],
): Omit<T, KEYS>;
```

| Parameter | Type | Description |
| --- | --- | --- |
| obj | T |  |
| keys | KEYS[] |  |

**Returns:**

Omit&lt;T, KEYS&gt;

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/typed-routes.ts)

## PageModule

```typescript
export type PageModule = RouteModule & {
  readonly default: (props: Record<string, never>) => JSXOutput;
  readonly routeConfig?: RouteConfig;
  readonly head?: ContentModuleHead;
  readonly eTag?: ContentModuleETag;
  readonly cacheKey?: CacheKeyFn;
  readonly headings?: ContentHeading[];
  readonly onStaticGenerate?: StaticGenerateHandler;
};
```

**References:** [RouteConfig](#routeconfig), [ContentModuleHead](#contentmodulehead), [ContentModuleETag](#contentmoduleetag), [CacheKeyFn](#cachekeyfn), [ContentHeading](#contentheading), [StaticGenerateHandler](#staticgeneratehandler)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## PathParams

```typescript
export declare type PathParams = Record<string, string>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## PrefetchStrategy

Defines when link prefetching should be triggered.

```typescript
export type PrefetchStrategy =
  /**
   * Prefetch when the user commits to navigating.
   *
   * Triggered by `pointerdown` or the `Enter` key.
   */
  | "commit"
  /**
   * Prefetch when the user shows navigation intent.
   *
   * Triggered by `pointerenter`, hover, or focus.
   */
  | "intent"
  /** Prefetch when the link becomes visible in the viewport. */
  | "visible"
  /** Disable link prefetching. */
  | "off";
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/link-component.tsx)

## PreventNavigateCallback

```typescript
export type PreventNavigateCallback = (
  url?: number | URL,
) => ValueOrPromise<boolean>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## Q_ROUTE

```typescript
Q_ROUTE = "q:route";
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/constants.ts)

## QWIK_CITY_SCROLLER

> Warning: This API is now obsolete.
>
> Use `QWIK_ROUTER_SCROLLER` instead (will be removed in V3)

```typescript
QWIK_CITY_SCROLLER = "_qCityScroller";
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QWIK_ROUTER_SCROLLER

```typescript
QWIK_ROUTER_SCROLLER = "_qRouterScroller";
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikCityMockProvider

> Warning: This API is now obsolete.
>
> Use `useQwikMockRouter()` instead. Will be removed in V3

```typescript
QwikCityMockProvider: import("@qwik.dev/core").Component<QwikRouterMockProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikCityPlan

> Warning: This API is now obsolete.
>
> Use `QwikRouterConfig` instead. Will be removed in V3.

```typescript
export type QwikCityPlan = QwikRouterConfig;
```

**References:** [QwikRouterConfig](#qwikrouterconfig)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## QwikCityProps

> Warning: This API is now obsolete.
>
> Use `QwikRouterProps` instead. Will be removed in v3.

```typescript
export type QwikCityProps = QwikRouterProps;
```

**References:** [QwikRouterProps](#qwikrouterprops)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikCityProvider

> Warning: This API is now obsolete.
>
> Use `useQwikRouter()` instead. Will be removed in v3.

```typescript
QwikCityProvider: import("@qwik.dev/core").Component<QwikRouterProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterConfig

```typescript
export interface QwikRouterConfig
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| basePathname? | `readonly` | string | _(Optional)_ |
| cacheModules? | `readonly` | boolean | _(Optional)_ |
| fallthrough? | `readonly` | boolean | _(Optional)_ When true, return null instead of rendering the 404 page, letting the adapter handle it |
| routes | `readonly` | [RouteData](#routedata) |  |
| serverPlugins? | `readonly` | RouteModule[] | _(Optional)_ |
| trailingSlash? | `readonly` | boolean | _(Optional)_ |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## QwikRouterEnvData

```typescript
export interface QwikRouterEnvData
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| ev |  | RequestEvent |  |
| loadedRoute |  | LoadedRoute |  |
| loaderValues |  | Record<string, unknown> |  |
| params |  | [PathParams](#pathparams) |  |
| response |  | EndpointResponse |  |
| routeLoaderCtx |  | RouteLoaderCtx |  |
| routeName |  | string |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## QwikRouterMockActionProp

```typescript
export interface QwikRouterMockActionProp<T = any>
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| action |  | [Action](#action)<T> | The action function to mock. |
| handler |  | QRL<(data: T) => ValueOrPromise<RouteActionResolver>> | The QRL function that will be called when the action is submitted. |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterMockLoaderProp

```typescript
export interface QwikRouterMockLoaderProp<T = any>
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| data |  | T | The data to return when the loader is called. |
| loader |  | [Loader](#loader_2)<T> | The loader function to mock. |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterMockProps

```typescript
export interface QwikRouterMockProps
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| actions? |  | Array<[QwikRouterMockActionProp](#qwikroutermockactionprop)<any>> | _(Optional)_ Allow mocking actions defined with `routeAction$` function. ``` [ { action: useAddUser, handler: $(async (data) => { console.log('useAddUser action called with data:', data); }), }, ]; ``` |
| goto? |  | [RouteNavigate](#routenavigate) | _(Optional)_ Allow mocking the `goto` function returned by `useNavigate` hook. |
| loaders? |  | Array<[QwikRouterMockLoaderProp](#qwikroutermockloaderprop)<any>> | _(Optional)_ Allow mocking data for loaders defined with `routeLoader$` function. ``` [ { loader: useProductData, data: { product: { name: 'Test Product' } }, }, ]; ``` |
| params? |  | Record<string, string> | _(Optional)_ Allow mocking the route params returned by `useLocation` hook. |
| url? |  | string | _(Optional)_ Allow mocking the url returned by `useLocation` hook. Default: `http://localhost/` |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterMockProvider

```typescript
QwikRouterMockProvider: import("@qwik.dev/core").Component<QwikRouterMockProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterProps

```typescript
export interface QwikRouterProps
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| viewTransition? |  | boolean | _(Optional)_ Enable the ViewTransition API on SPA navigation. Opt-in: set to `true` to enable. Default: `false` |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## QwikRouterProvider

This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component, unless you have a good reason to make your root component reactive.

```typescript
QwikRouterProvider: import("@qwik.dev/core").Component<QwikRouterProps>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## RendererOptions

```typescript
export type RendererOptions = Omit<RenderToStreamOptions, "serverData"> & {
  serverData: ServerData;
};
```

**References:** [ServerData](#serverdata)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/create-renderer.ts)

## RendererOutputOptions

```typescript
export type RendererOutputOptions = Omit<
  RenderToStreamOptions,
  "serverData"
> & {
  serverData: ServerData & {
    documentHead?: DocumentHeadValue;
  } & Record<string, unknown>;
};
```

**References:** [ServerData](#serverdata), [DocumentHeadValue](#documentheadvalue)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/create-renderer.ts)

## ResolvedDocumentHead

```typescript
export type ResolvedDocumentHead<
  FrontMatter extends Record<string, any> = Record<string, unknown>,
> = Required<DocumentHeadValue<FrontMatter>> & {
  readonly manifestHash: string;
};
```

**References:** [DocumentHeadValue](#documentheadvalue)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## routeAction$

Define a route action that handles form submissions or programmatic invocations.

Actions run on the server when submitted from the client. The result is returned as an `ActionStore` with `.value` for success data and `.error` for errors (including validation errors from `zod$`/`valibot$` where `.fieldErrors` etc. are accessible directly on `.error`).

By default, after an action completes, ALL current route loaders are invalidated on the client and re-fetched as needed (so that the browser cache is correct). This can be controlled with:

- `invalidate: [loader1, loader2]`: Only invalidate specific loaders. The client re-fetches them individually. Other loaders keep their current data. - `invalidate: []`: No loaders are invalidated. The action response only contains the action result. Use this when the action doesn't affect any loader data.

The `strictLoaders` Vite plugin option applies `invalidate: []` globally for all actions that don't specify an explicit `invalidate` option.

```typescript
routeAction$: ActionConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## routeActionQrl

```typescript
routeActionQrl: ActionConstructorQRL;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## RouteConfig

Unified route configuration export. Groups head, eTag, and cacheKey with the same resolution rules as DocumentHead: can be a static object or a function receiving DocumentHeadProps.

When a module exports `routeConfig`, the separate `head`, `eTag`, and `cacheKey` exports are ignored for that module.

```typescript
export type RouteConfig =
  | RouteConfigValue
  | ((props: DocumentHeadProps) => RouteConfigValue);
```

**References:** [RouteConfigValue](#routeconfigvalue), [DocumentHeadProps](#documentheadprops)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## RouteConfigValue

The value shape returned by a routeConfig export (object form or function return).

```typescript
export interface RouteConfigValue
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| cacheKey? | `readonly` | [CacheKeyFn](#cachekeyfn) | _(Optional)_ |
| eTag? | `readonly` | [ContentModuleETag](#contentmoduleetag) | _(Optional)_ |
| head? | `readonly` | [DocumentHeadValue](#documentheadvalue) | _(Optional)_ |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## RouteData

A nested route trie structure. The root represents `/` and each level represents a URL segment.

Keys starting with `_` are metadata; all other keys are child route segments.

- Use `_W` as the key for a single dynamic segment (param); `_P` on that node names the param. - Use `_A` as the key for a rest/catch-all segment; `_P` on that node names the param. - For infix params like `pre[slug]post`, use `_W` with `_0` (prefix) and `_9` (suffix). - Use `_M` for an array of group (pathless layout) nodes, sorted by group name.

When matching, exact segments are tried first (case-insensitive), then `_W` (with optional prefix/suffix), then `_A`. When no route matches, the closest `_E` (error.tsx) or `_4` (404.tsx) loader in the ancestor chain is used to render the error page.

```typescript
export interface RouteData
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| \_0? |  | string | _(Optional)_ Prefix for infix params (e.g. "pre" for `pre[slug]post`) — only on `_W` nodes |
| \_4? |  | ContentModuleLoader \\| ModuleLoader[] | _(Optional)_ Not-found (404) boundary: single loader (runtime prepends layouts) or override chain (`404@layout`/`!`). |
| \_9? |  | string | _(Optional)_ Suffix for infix params (e.g. "post" for `pre[slug]post`) — only on `_W` nodes |
| \_B? |  | string[] | _(Optional)_ The JS bundle names for this route (SSR only) |
| \_E? |  | ContentModuleLoader \\| ModuleLoader[] | _(Optional)_ Error (error.tsx) boundary, same single-or-override-chain shape as `_4`. |
| \_G? |  | string | _(Optional)_ Rewrite/goto target path. Matcher re-walks trie from root using this path's keys. |
| \_I? |  | ContentModuleLoader \\| ModuleLoader[] | _(Optional)_ This node's index/page loader. Single = normal (runtime prepends gathered \_L). Array = override (layout stop / named layout — IS the complete chain). |
| \_L? |  | ContentModuleLoader | _(Optional)_ This node's layout loader (single). Runtime accumulates these during trie traversal. |
| \_M? |  | [RouteData](#routedata)[] | _(Optional)_ Group (pathless layout) nodes merged into this level, sorted by group name |
| \_N? |  | MenuModuleLoader | _(Optional)_ Menu loader for this subtree (from menu.md). Runtime uses nearest ancestor during traversal. |
| \_P? |  | string | _(Optional)_ The parameter name when this node is reached via `_W` or `_A` from the parent |
| \_R? |  | string[] | _(Optional)_ Array of routeLoader$ hashes for this node's loaders |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## routeLoader$

Define a route loader that fetches data before the route renders.

Route loaders run on the server during SSR and return data as a `ComputedSignal`. On the client, loaders automatically re-fetch when the route changes (SPA navigation). Each loader gets its own JSON endpoint (`q-loader-{id}.{hash}.json`), so only the loaders present on the target route are fetched.

\*\*Important:\*\* Route loader data uses Qwik's custom serialization format, not standard JSON. This means the data supports features like circular references, Dates, and other non-JSON types, but it cannot be consumed by external clients expecting plain JSON.

\#\# Options

- `search: string[]`: Allowlist of URL search params the loader depends on. Only listed params are sent in the request and changes to other params are ignored. During SSR and loader JSON requests, the loader's request event is filtered to those params too. `search: []` means no search params are sent and only route path changes trigger a re-fetch. - `allowStale: false`: Clears the previous value when re-fetching, so components see a loading state instead of stale data during navigation. Useful when old data would be confusing. - `eTag`: Enable ETag-based caching. Can be `true` (auto-hash), a string, or a function. - `expires` / `poll`: Control client-side caching and polling behavior.

The `strictLoaders` Vite plugin option applies `search: []` globally for all loaders that don't specify an explicit `search` option.

```typescript
routeLoader$: LoaderConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/route-loaders.ts)

## RouteLocation

```typescript
export interface RouteLocation
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| isNavigating | `readonly` | boolean |  |
| params | `readonly` | Readonly<Record<string, string>> |  |
| prevUrl | `readonly` | URL \\| undefined |  |
| url | `readonly` | URL |  |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## RouteNavigate

```typescript
export type RouteNavigate = QRL<
  (
    path?: string | number | URL,
    options?:
      | {
          type?: Exclude<NavigationType, "initial">;
          forceReload?: boolean;
          replaceState?: boolean;
          scroll?: boolean;
        }
      | boolean,
  ) => Promise<void>
>;
```

**References:** [NavigationType](#navigationtype_2)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## RouterOutlet

```typescript
RouterOutlet: import("@qwik.dev/core").Component<unknown>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/router-outlet-component.tsx)

## server$

```typescript
server$: <T extends ServerFunction>(
  qrl: T,
  options?: ServerConfig | undefined,
) => ServerQRL<T>;
```

| Parameter | Type | Description |
| --- | --- | --- |
| qrl | T |  |
| options | ServerConfig \\| undefined | _(Optional)_ |

**Returns:**

[ServerQRL](#serverqrl)&lt;T&gt;

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## ServerData

The server data that is provided by Qwik Router during SSR rendering. It can be retrieved with `useServerData(key)` in the server, but it is not available in the client.

```typescript
export type ServerData = {
  url: string;
  requestHeaders: Record<string, string>;
  renderMode: "static" | "server";
  locale: string | undefined;
  nonce: string | undefined;
  containerAttributes: Record<string, string> & {
    [Q_ROUTE]: string;
  };
  qwikrouter: QwikRouterEnvData;
};
```

**References:** [Q_ROUTE](#q_route), [QwikRouterEnvData](#qwikrouterenvdata)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ServerFunction

```typescript
export type ServerFunction = {
  (this: RequestEventBase, ...args: any[]): any;
  options?: ServerConfig;
};
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ServerQRL

You can pass an AbortSignal as the first argument of a `server$` function and it will use it to abort the fetch when fired.

```typescript
export type ServerQRL<T extends ServerFunction> = QRL<
  | ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
  | ((...args: Parameters<T>) => ReturnType<T>)
>;
```

**References:** [ServerFunction](#serverfunction)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ServiceWorkerRegister

Loads the service workers that are defined in the routes. Any file named `service-worker.*` (all JS extensions are allowed) will be picked up, bundled into a separate file, and registered as a service worker.

Qwik 1.14.0 and above now use `<link rel="modulepreload">` by default. If you didn't add custom service-worker logic, you should remove your service-worker.ts file(s) for the `ServiceWorkerRegister` Component to actually unregister the service-worker.js and delete its related cache. Make sure to keep the `ServiceWorkerRegister` Component in your app (without any service-worker.ts file) as long as you want to unregister the service-worker.js for your users.

```typescript
ServiceWorkerRegister: (props: { nonce?: string }) => JSXOutput;
```

| Parameter | Type | Description |
| --- | --- | --- |
| props | \{ nonce?: string; } |  |

**Returns:**

JSXOutput

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/sw-component.tsx)

## StaticGenerate

```typescript
export interface StaticGenerate
```

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| params? |  | [PathParams](#pathparams)[] | _(Optional)_ |

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## StaticGenerateHandler

```typescript
export type StaticGenerateHandler = ({
  env,
}: {
  env: EnvGetter;
}) => Promise<StaticGenerate> | StaticGenerate;
```

**References:** [StaticGenerate](#staticgenerate)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## StrictUnion

```typescript
export type StrictUnion<T> = Prettify<StrictUnionHelper<T, T>>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## TypedDataValidator

```typescript
export type TypedDataValidator = ValibotDataValidator | ZodDataValidator;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## untypedAppUrl

> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

```typescript
untypedAppUrl: (
  route: string,
  params?: Record<string, string>,
  paramsPrefix?: string,
) => string;
```

| Parameter | Type | Description |
| --- | --- | --- |
| route | string |  |
| params | Record<string, string> | _(Optional)_ |
| paramsPrefix | string | _(Optional)_ |

**Returns:**

string

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/typed-routes.ts)

## useContent

```typescript
useContent: () => import("./types").ContentState;
```

**Returns:**

import("./types").ContentState

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## useDocumentHead

Returns the document head for the current page. The generic type describes the front matter.

```typescript
useDocumentHead: <
  FrontMatter extends Record<string, unknown> = Record<string, any>,
>() => Required<ResolvedDocumentHead<FrontMatter>>;
```

**Returns:**

Required&lt;[ResolvedDocumentHead](#resolveddocumenthead)&lt;FrontMatter&gt;&gt;

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## useHttpStatus

```typescript
useHttpStatus: () => import("./types").HttpStatus;
```

**Returns:**

import("./types").[HttpStatus](#httperrorprops)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## useLocation

```typescript
useLocation: () => RouteLocation;
```

**Returns:**

[RouteLocation](#routelocation)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## useNavigate

```typescript
useNavigate: () => RouteNavigate;
```

**Returns:**

[RouteNavigate](#routenavigate)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## usePreventNavigate$

Prevent navigation attempts. This hook registers a callback that will be called before SPA or browser navigation.

Return `true` to prevent navigation.

\#### SPA Navigation

For Single-Page-App (SPA) navigation (via `<Link />`, `const nav = useNavigate()`, and browser backwards/forwards inside SPA history), the callback will be provided with the target, either a URL or a number. It will only be a number if `nav(number)` was called to navigate forwards or backwards in SPA history.

If you return a Promise, the navigation will be blocked until the promise resolves.

This can be used to show a nice dialog to the user, and wait for the user to confirm, or to record the url, prevent the navigation, and navigate there later via `nav(url)`.

\#### Browser Navigation

However, when the user navigates away by clicking on a regular `<a />`, reloading, or moving backwards/forwards outside SPA history, this callback will not be awaited. This is because the browser does not provide a way to asynchronously prevent these navigations.

In this case, returning returning `true` will tell the browser to show a confirmation dialog, which cannot be customized. You are also not able to show your own `window.confirm()` dialog during the callback, the browser won't allow it. If you return a Promise, it will be considered as `true`.

When the callback is called from the browser, no url will be provided. Use this to know whether you can show a dialog or just return `true` to prevent the navigation.

```typescript
usePreventNavigate$: (qrl: PreventNavigateCallback) => void
```

| Parameter | Type | Description |
| --- | --- | --- |
| qrl | [PreventNavigateCallback](#preventnavigatecallback) |  |

**Returns:**

void

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/use-functions.ts)

## useQwikRouter

This hook initializes Qwik Router, providing the necessary context for it to work.

This hook should be used once, at the root of your application.

```typescript
useQwikRouter: (props?: QwikRouterProps) => void
```

| Parameter | Type | Description |
| --- | --- | --- |
| props | [QwikRouterProps](#qwikrouterprops) | _(Optional)_ |

**Returns:**

void

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx)

## valibot$

> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

```typescript
valibot$: ValibotConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## validator$

```typescript
validator$: ValidatorConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## ValidatorErrorKeyDotNotation

```typescript
export type ValidatorErrorKeyDotNotation<T, Prefix extends string = ""> =
  IsAny<T> extends true
    ? never
    : T extends object
      ? {
          [K in keyof T & string]: IsAny<T[K]> extends true
            ? never
            : T[K] extends (infer U)[]
              ? IsAny<U> extends true
                ? never
                : U extends object
                  ?
                      | `${Prefix}${K}[]`
                      | ValidatorErrorKeyDotNotation<U, `${Prefix}${K}[].`>
                  : `${Prefix}${K}[]`
              : T[K] extends object
                ? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`>
                : `${Prefix}${K}`;
        }[keyof T & string]
      : never;
```

**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ValidatorErrorType

```typescript
export type ValidatorErrorType<T, U = string> = {
  formErrors: U[];
  fieldErrors: Partial<{
    [K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
      ? U[]
      : U;
  }>;
};
```

**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## ValidatorReturn

```typescript
export type ValidatorReturn<T extends Record<string, any> = {}> =
  | ValidatorReturnSuccess
  | ValidatorReturnFail<T>;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)

## zod$

```typescript
zod$: ZodConstructor;
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/server-functions.ts)

## ZodConstructor

```typescript
export type ZodConstructor = {
  <T extends z.ZodRawShape>(schema: T): ZodDataValidator<z.ZodObject<T>>;
  <T extends z.ZodRawShape>(
    schema: (zod: typeof z.z, ev: RequestEvent) => T,
  ): ZodDataValidator<z.ZodObject<T>>;
  <T extends z.Schema>(schema: T): ZodDataValidator<T>;
  <T extends z.Schema>(
    schema: (zod: typeof z.z, ev: RequestEvent) => T,
  ): ZodDataValidator<T>;
};
```

[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/types.ts)