Interface Route<T, R, C>

Describes a single route.

A route represents a single or multiple sections in the URL. It defines the behavior of a page in response to URL updates. A route can act as a content producer or as middleware for child routes.

interface Route<T, R, C> {
    children?: readonly Route<T, R, C>[];
    path: string;
    action?(this: Route<T, R, C>, context: RouterContext<T, R, C>): MaybePromise<undefined | null | T>;
}

Type Parameters

Properties

children? path

Methods

action?

Properties

Optional Readonlychildren

children?: readonly Route<T, R, C>[]

Contains a list of nested routes.

Readonlypath

path: string

Represents a section of the URL specific to the current route. When constructing the final URL, this section will be appended to the parent route's path or to the baseURL if there is no parent route.

Remarks

You can utilize all capabilities of the URLPattern related to the pathname, including incorporating RegExp instructions into the URL section. However, do not include the hash (#) and search (?) parts; use the route action instead.

Example

const router = new Router({
  path: '/foo/:bar',
  children: [{
    path: '/id/:id(\\d+)'
  }]
});

The code above matches the following URL:

/foo/some-random-text/id/100

Methods

Optional Readonlyaction

  • action(this, context): MaybePromise<undefined | null | T>

  • Executes each time the route is resolved.

    The action is a fundamental part of the route concept. Actions are executed recursively from the root route to the child route and can either produce content or perform actions before or after the child's action.

    If the action is not defined, the resolution algorithm will simply return the result of the child route's action.

    Parameters

    Returns MaybePromise<undefined | null | T>

    A result that will be delivered to the Router.resolve method.

    Example

    const router = new Router<string>({
      async action({ next }) {
        console.log('before');
        await next();
        console.log('after');
      },
      path: '/foo',
      children: [{
        action() {
          console.log('child');
          return 'content';
        },
        path: '/bar'
      }]
    });

    router.resolve('/foo/bar');

    The above code will print:

    before
    child
    after

Settings

Member Visibility

On This Page

Properties
Methods
""