RouteDefinition

createRouter() takes a RouterConfig object. RouterConfig has to contain an array of RouteDefinition objects.

Syntax

interface RouteDefinition<TMetadata = Record<string, any>> {
    id: string;
    uri: string;
    page: Partial<PageReference>
    handler: () => Promise<{ default: RouteHandler }>
    patterns?: { [paramName: string]: string };
    exact?: boolean;
    metadata?: TMetadata;
}

Properties

Property Type Required/Optional Description
id String Required Each RouteDefinition has to have a unique identifier.
uri String A string pattern for URI locations that match this RouteDefinition. You can use the following characters: /, :parameter, ?, &. You can't use # or *.
page The form of page references that match the LwrConfigRouteDefinition. page values can be :parameter bindings, which map a path or query parameter from the URI to an attributes or state property, or literal bindings, which hard code a type, attribute, or state property to a literal value. Literal bindings can't contain the following characters: ?, *, #, &, +, ;, (, ).
handler String Optional A promise to a module that's called when a RouteDefinition matches a location. For more information, see Route Handler Modules.
patterns Optional A regular expression that a parameter has to match to be valid. To prevent unexpected values in the expression pattern, explicitly wrap the expression in the start-of-line character (^) and end-of-line character ($). For example: {"patterns": {"parameter": "^id[0-9a-zA-Z]{5}$"}}.
exact Boolean Optional If there's a nested router, this value must be false. The default value is true.
metadata Optional Developer-defined metadata in the form of key (string) and value (any type) pairs. You can use the metadata property to attach additional information to an LwrConfigRouteDefinition. Extend LwrConfigRouteDefinition for required or more strongly typed metadata.

Example

{
    id: 'namedPage',
    uri: '/:pageName',
    handler: () => import('example/namedPageHandler'),
    page: {
        type: 'namedPage',
        attributes: {
            pageName: ':pageName',
        },
    },
}

See Also