Skip to main content

Loader

See what is loader at Data Fetching

useLoaderData Type:​

type UseLoaderData = <T = any>() => T

loader Type:​

type Loader<T extends {} = {}> = (
  loaderContenxt: IRouteLoaderContext
) => Promise<T | Response | void | undefined> | T | Response | void | undefined;

loaderContenxt​

loaderContenxt is an object containing several useful properties and methods.

pathname​

Current url path

  • type string

Example:

If current url is /xx/yy?hello=world&test=123,
pathname will be /xx/yy

query​

The query object of current url.

  • type object

Example:

If current url is /xx/yy?hello=world&test=123,
query will be

{
  hello: 'world',
  test: '123'
}

params​

The params of current url.

If matched routes contains dynamic route, the params of dynamic route will be parsed as this params object.

  • type object

Example:

If the route is set as /:foo/:bar and the current url is /xx/yy?hello=world&test=123 params will be

{
  foo: 'xx',
  bar: 'yy'
}

redirect​

make a redirect to another path.

  • type
    (toPath: string, status?: number = 302) => Response

Example:

import { Loader } from '@shuvi/runtime';
export const loader: Loader = async ({ redirect }) => {
  return redirect('/target', 301)
};

error​

Make a redirect to error page.

  • type
    (body?: string, statusCode?: number = 500) => Response

Example:

import { Loader } from '@shuvi/runtime';
export const loader: Loader = async ({ redirect }) => {
  return error('not found', 404)
};

appContext​

Application context object, which is accessiable during the entire lifecycle of application

req​

Current request information. Only available on server side.