API โบ @qwik.dev/qwik-router
Action
export type Action<
RETURN,
INPUT = Record<string, unknown>,
OPTIONAL extends boolean = true,
> = {
(): ActionStore<RETURN, INPUT, OPTIONAL>;
};
References: ActionStore
ActionConstructor
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: {
readonly id?: string;
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: {
readonly id?: string;
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: {
readonly id?: string;
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?: {
readonly id?: string;
},
): Action<StrictUnion<OBJ>>;
};
References: TypedDataValidator, DataValidator, GetValidatorOutputType, Action, StrictUnion, FailReturn, ValidatorErrorType, GetValidatorInputType, FailOfRest, JSONObject
ActionReturn
export type ActionReturn<RETURN> = {
readonly status?: number;
readonly value: RETURN;
};
ActionStore
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
ContentHeading
export interface ContentHeading
Property | Modifiers | Type | Description |
---|---|---|---|
| string | ||
| number | ||
| string |
ContentMenu
export interface ContentMenu
Property | Modifiers | Type | Description |
---|---|---|---|
| string | (Optional) | |
| (Optional) | ||
| string |
createRenderer
Creates the render()
function that is required by createQwikRouter()
. It requires a function that returns the jsx
and options
for the renderer.
createRenderer: (
getOptions: (options: RendererOptions) => {
jsx: JSXOutput;
options: RendererOutputOptions;
},
) => Render;
Parameter | Type | Description |
---|---|---|
getOptions | (options: RendererOptions) => { jsx: JSXOutput; options: RendererOutputOptions; } |
Returns:
Render
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() }],
},
},
},
};
});
DataValidator
export type DataValidator<T extends Record<string, any> = {}> = {
validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
};
References: ValidatorReturn
DocumentHead
export type DocumentHead =
| DocumentHeadValue
| ((props: DocumentHeadProps) => DocumentHeadValue);
References: DocumentHeadValue, DocumentHeadProps
DocumentHeadProps
export interface DocumentHeadProps extends RouteLocation
Extends: RouteLocation
Property | Modifiers | Type | Description |
---|---|---|---|
| |||
| ResolveSyncValue | ||
| <T>(fn: () => T) => T |
DocumentHeadValue
export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>
Property | Modifiers | Type | Description |
---|---|---|---|
| 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. | |
| readonly DocumentLink[] | (Optional) Used to manually append | |
| readonly DocumentMeta[] | (Optional) Used to manually set meta tags in the head. Additionally, the | |
| readonly DocumentScript[] | (Optional) Used to manually append | |
| readonly DocumentStyle[] | (Optional) Used to manually append | |
| string | (Optional) Sets |
DocumentLink
export interface DocumentLink
Property | Modifiers | Type | Description |
---|---|---|---|
string | (Optional) | ||
string | (Optional) | ||
boolean | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) | ||
string | (Optional) |
DocumentMeta
export interface DocumentMeta
Property | Modifiers | Type | Description |
---|---|---|---|
| string | (Optional) | |
| string | (Optional) | |
| string | (Optional) | |
| string | (Optional) | |
| string | (Optional) | |
| string | (Optional) | |
| string | (Optional) |
DocumentScript
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.
export interface DocumentScript
Property | Modifiers | Type | Description |
---|---|---|---|
| string | (BETA) (Optional) | |
| Readonly<QwikIntrinsicElements['script']> | (BETA) (Optional) | |
| string | (BETA) (Optional) |
DocumentStyle
export interface DocumentStyle
Property | Modifiers | Type | Description |
---|---|---|---|
| string | (Optional) | |
| Readonly<QwikIntrinsicElements['style']> | (Optional) | |
| string |
ErrorBoundary
ErrorBoundary: import("@qwik.dev/core").Component<ErrorBoundaryProps>;
FailOfRest
export type FailOfRest<REST extends readonly DataValidator[]> =
REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
References: DataValidator
FailReturn
export type FailReturn<T> = T & Failed;
Form
Form: <O, I>(
{ action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
key: string | null,
) => import("@qwik.dev/core").JSXOutput;
Parameter | Type | Description |
---|---|---|
{ action, spaReset, reloadDocument, onSubmit$, ...rest } | FormProps<O, I> | |
key | string | null |
Returns:
import("@qwik.dev/core").JSXOutput
FormProps
export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Extends: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Property | Modifiers | Type | Description |
---|---|---|---|
ActionStore<O, I, true | false> | (Optional) Reference to the action returned by | ||
string | number | null | (Optional) | ||
QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined | (Optional) Event handler executed right when the form is submitted. | ||
QRLEventHandlerMulti<CustomEvent<FormSubmitCompletedDetail<O>>, HTMLFormElement> | undefined | (Optional) Event handler executed right after the action is executed successfully and returns some data. | ||
boolean | (Optional) When | ||
boolean | (Optional) When Defaults to |
FormSubmitSuccessDetail
export interface FormSubmitCompletedDetail<T>
Property | Modifiers | Type | Description |
---|---|---|---|
number | |||
T |
GetValidatorInputType
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
GetValidatorOutputType
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
GetValidatorType
export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
GetValidatorOutputType<VALIDATOR>;
References: TypedDataValidator, GetValidatorOutputType
globalAction$
globalAction$: ActionConstructor;
JSONObject
export type JSONObject = {
[x: string]: JSONValue;
};
References: JSONValue
JSONValue
export type JSONValue =
| string
| number
| boolean
| {
[x: string]: JSONValue;
}
| Array<JSONValue>;
References: JSONValue
Link
Link: import("@qwik.dev/core").Component<LinkProps>;
LinkProps
export interface LinkProps extends AnchorAttributes
Extends: AnchorAttributes
Property | Modifiers | Type | Description |
---|---|---|---|
boolean | 'js' | (Optional) **Defaults to _true_.** Whether Qwik should prefetch and cache the target page of this ** This **improves UX performance** for client-side (**SPA**) navigations. Prefetching occurs when a the Link enters the viewport in production (** Prefetching will not occur if the user has the **data saver** setting enabled. Setting this value to ** | ||
boolean | (Optional) | ||
boolean | (Optional) | ||
boolean | (Optional) |
Loader_2
export type Loader<RETURN> = {
(): LoaderSignal<RETURN>;
};
References: LoaderSignal
LoaderSignal
export type LoaderSignal<TYPE> = TYPE extends () => ValueOrPromise<
infer VALIDATOR
>
? ReadonlySignal<ValueOrPromise<VALIDATOR>>
: ReadonlySignal<TYPE>;
MenuData
export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];
NavigationType_2
export type NavigationType = "initial" | "form" | "link" | "popstate";
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
.
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<T, KEYS>
PageModule
export interface PageModule extends RouteModule
Extends: RouteModule
Property | Modifiers | Type | Description |
---|---|---|---|
| unknown | ||
| ContentModuleHead | (Optional) | |
| (Optional) | ||
| (Optional) |
PathParams
export declare type PathParams = Record<string, string>;
PreventNavigateCallback
export type PreventNavigateCallback = (
url?: number | URL,
) => ValueOrPromise<boolean>;
Q_ROUTE
Q_ROUTE = "q:route";
QWIK_CITY_SCROLLER
Warning: This API is now obsolete.
Use
QWIK_ROUTER_SCROLLER
instead (will be removed in V3)
QWIK_CITY_SCROLLER = "_qCityScroller";
QWIK_ROUTER_SCROLLER
QWIK_ROUTER_SCROLLER = "_qRouterScroller";
QwikCityMockProps
Warning: This API is now obsolete.
Use
QwikRouterMockProps
instead. will be removed in V3
export type QwikCityMockProps = QwikRouterMockProps;
References: QwikRouterMockProps
QwikCityMockProvider
Warning: This API is now obsolete.
Use
QwikRouterMockProvider
instead. Will be removed in V3
QwikCityMockProvider: import("@qwik.dev/core").Component<QwikRouterMockProps>;
QwikCityPlan
Warning: This API is now obsolete.
Use
QwikRouterConfig
instead. Will be removed in V3.
export type QwikCityPlan = QwikRouterConfig;
References: QwikRouterConfig
QwikCityProps
Warning: This API is now obsolete.
Use
QwikRouterProps
instead. will be removed in V3
export type QwikCityProps = QwikRouterProps;
References: QwikRouterProps
QwikCityProvider
Warning: This API is now obsolete.
Use
QwikRouterProvider
instead. will be removed in V3
QwikCityProvider: import("@qwik.dev/core").Component<QwikRouterProps>;
QwikRouterConfig
export interface QwikRouterConfig
Property | Modifiers | Type | Description |
---|---|---|---|
| string | (Optional) | |
| boolean | (Optional) | |
| MenuData[] | (Optional) | |
| |||
| RouteModule[] | (Optional) | |
| boolean | (Optional) |
QwikRouterEnvData
export interface QwikRouterEnvData
Property | Modifiers | Type | Description |
---|---|---|---|
RequestEvent | |||
LoadedRoute | null | |||
EndpointResponse | |||
string |
QwikRouterMockProps
export interface QwikRouterMockProps
Property | Modifiers | Type | Description |
---|---|---|---|
(Optional) | |||
Record<string, string> | (Optional) | ||
string | (Optional) |
QwikRouterMockProvider
QwikRouterMockProvider: import("@qwik.dev/core").Component<QwikRouterMockProps>;
QwikRouterProps
export interface QwikRouterProps
Property | Modifiers | Type | Description |
---|---|---|---|
boolean | (Optional) Enable the ViewTransition API Default: |
QwikRouterProvider
QwikRouterProvider: import("@qwik.dev/core").Component<QwikRouterProps>;
RendererOptions
export type RendererOptions = Omit<RenderOptions, "serverData"> & {
serverData: ServerData;
};
References: ServerData
RendererOutputOptions
export type RendererOutputOptions = Omit<RenderOptions, "serverData"> & {
serverData: ServerData & {
documentHead?: DocumentHeadValue;
} & Record<string, unknown>;
};
References: ServerData, DocumentHeadValue
ResolvedDocumentHead
export type ResolvedDocumentHead<
FrontMatter extends Record<string, any> = Record<string, unknown>,
> = Required<DocumentHeadValue<FrontMatter>>;
References: DocumentHeadValue
routeAction$
routeAction$: ActionConstructor;
RouteData
export type RouteData =
| [routeName: string, loaders: ModuleLoader[]]
| [
routeName: string,
loaders: ModuleLoader[],
originalPathname: string,
routeBundleNames: string[],
];
routeLoader$
routeLoader$: LoaderConstructor;
RouteLocation
export interface RouteLocation
Property | Modifiers | Type | Description |
---|---|---|---|
| boolean | ||
| Readonly<Record<string, string>> | ||
| URL | undefined | ||
| URL |
RouteNavigate
export type RouteNavigate = QRL<
(
path?: string | number | URL,
options?:
| {
type?: Exclude<NavigationType, "initial">;
forceReload?: boolean;
replaceState?: boolean;
scroll?: boolean;
}
| boolean,
) => Promise<void>
>;
References: NavigationType
RouterOutlet
RouterOutlet: import("@qwik.dev/core").Component<unknown>;
server$
server$: <T extends ServerFunction>(
qrl: T,
options?: ServerConfig | undefined,
) => ServerQRL<T>;
Parameter | Type | Description |
---|---|---|
qrl | T | |
options | ServerConfig | undefined | (Optional) |
Returns:
ServerQRL<T>
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.
export type ServerData = {
url: string;
requestHeaders: Record<string, string>;
locale: string | undefined;
nonce: string | undefined;
containerAttributes: Record<string, string> & {
[Q_ROUTE]: string;
};
qwikrouter: QwikRouterEnvData;
};
References: Q_ROUTE, QwikRouterEnvData
ServerFunction
export type ServerFunction = {
(this: RequestEventBase, ...args: any[]): any;
options?: ServerConfig;
};
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.
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
References: ServerFunction
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.
ServiceWorkerRegister: (props: { nonce?: string }) =>
import("packages/qwik/public").JSXOutput;
Parameter | Type | Description |
---|---|---|
props | { nonce?: string; } |
Returns:
import("packages/qwik/public").JSXOutput
StaticGenerate
export interface StaticGenerate
Property | Modifiers | Type | Description |
---|---|---|---|
(Optional) |
StaticGenerateHandler
export type StaticGenerateHandler = ({
env,
}: {
env: EnvGetter;
}) => Promise<StaticGenerate> | StaticGenerate;
References: StaticGenerate
StrictUnion
export type StrictUnion<T> = Prettify<StrictUnionHelper<T, T>>;
TypedDataValidator
export type TypedDataValidator = ValibotDataValidator | ZodDataValidator;
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.
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
useContent
useContent: () => import("./types").ContentState;
Returns:
import("./types").ContentState
useDocumentHead
Returns the document head for the current page. The generic type describes the front matter.
useDocumentHead: <
FrontMatter extends Record<string, unknown> = Record<string, any>,
>() => Required<ResolvedDocumentHead<FrontMatter>>;
Returns:
Required<ResolvedDocumentHead<FrontMatter>>
useLocation
useLocation: () => RouteLocation;
Returns:
useNavigate
useNavigate: () => RouteNavigate;
Returns:
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.
usePreventNavigate$: (qrl: PreventNavigateCallback) => void
Parameter | Type | Description |
---|---|---|
qrl |
Returns:
void
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.
valibot$: ValibotConstructor;
validator$
validator$: ValidatorConstructor;
ValidatorErrorKeyDotNotation
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
ValidatorErrorType
export type ValidatorErrorType<T, U = string> = {
formErrors: U[];
fieldErrors: Partial<{
[K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
? U[]
: U;
}>;
};
References: ValidatorErrorKeyDotNotation
ValidatorReturn
export type ValidatorReturn<T extends Record<string, any> = {}> =
| ValidatorReturnSuccess
| ValidatorReturnFail<T>;
zod$
zod$: ZodConstructor;
ZodConstructor
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>;
};