@gluonjs/router / packages/router/src / lazyRoute
Function: lazyRoute()
lazyRoute(
load):LazyRouteComponent
Parameters
load
() => Promise<RouteComponent | { default: RouteComponent; }>
Returns
Example
Mark an asynchronous component loader so the Router resolves it only when a matching navigation needs that route:
import { html } from '@gluonjs/core';
import {
createRouterMatcher,
isLazyRouteComponent,
lazyRoute,
type MatcherResolution,
type RouteComponent,
type RouteComponentSource,
type RouteData,
type RouteMeta,
type RouteParamPrimitive,
type RouteParams,
type RouteParamsRaw,
type RouteRecordNormalized,
type RouteRecordRaw,
type RouterMatcher,
} from '@gluonjs/router';
const productId: RouteParamPrimitive = 42;
const rawParams = { id: productId } satisfies RouteParamsRaw;
const ProductPage: RouteComponent = ({ route }) => html`<h1>${route.params.id}</h1>`;
const source: RouteComponentSource = lazyRoute(async () => ProductPage);
const meta = { requiresAuth: false } satisfies RouteMeta;
const data = { section: 'catalog', cache: 'request-free' } satisfies RouteData;
const record = { path: '/products/:id', name: 'product', component: source, meta, data } satisfies RouteRecordRaw;
const matcher: RouterMatcher = createRouterMatcher([record]);
const resolution: MatcherResolution = matcher.resolveName('product', rawParams);
const params: RouteParams = resolution.params;
const normalized: RouteRecordNormalized = resolution.matched[0]!;
console.log(resolution.path, params.id, normalized.meta, normalized.data, isLazyRouteComponent(source));