Interface RouteOptions<Params, Data, Context>

A component that is rendered by a route.

If both component and lazyComponent are omitted then a route implicitly renders an Outlet.

A component that is rendered when an error was thrown during route rendering.

If true then pathname is matched in a case-sensitive manner.

Default

false
Copy

A lazy-loaded component that is rendered by a route. A component cached forever if a returned Promise is fulfilled.

Example

() => import('./UserPage')
Copy

Loads data required to render a route.

What to render when lazyComponent or loader are being loaded.

Default

"auto"
Copy

A component that is rendered when a lazyComponent or loader are being loaded. Render a skeleton or a spinner in this component to notify user that a new route is being loaded.

A component that is rendered if notFound was called during route rendering.

An adapter that can validate and transform params extracted from the Location.pathname and Location.searchParams.

A URL pathname pattern.

Pattern can include params that conform :[A-Za-z$_][A-Za-z0-9$_]+. For example "/:userId".

Params match a whole segment and cannot be partial. For example, "/teams--:teamId" is invalid and would throw a SyntaxError, while "/teams/:teamId" is valid.

By default, a param matches a non-empty pathname segment. To make a param optional (so it can match an absent segment) follow it by a ? flag. For example: "/user/:userId?" matches both "/user" and "/user/37".

Static pathname segments can be optional as well: "/project/task?/:taskId".

By default, a param matches a single pathname segment. Follow a param with a * flag to make it match multiple segments. For example: "/:slug*" matches "/watch" and "/watch/a/movie". Such params are called wildcard params.

To make param both wildcard and optional, combine * and ? flags: "/:slug*?".

To use : as a character in a pathname pattern, replace it with an encoded representation: %3A.

Default

"/"
Copy