@gluonjs/core / packages/router/src / LazyRouteComponent

Interface: LazyRouteComponent

Properties

[lazyRouteBrand]

readonly [lazyRouteBrand]: true

---

load

readonly load: () => Promise<RouteComponent | { default: RouteComponent; }>

Returns

Promise<RouteComponent | { default: RouteComponent; }>

Example

Represent a route component whose module is loaded only when navigation reaches that route:

import { html } from '@gluonjs/core';
import {
  createMemoryHistory,
  createRouter,
  createRouterMatcher,
  createRouterPlugin,
  isRouteActive,
  lazyRoute,
  type LazyRouteComponent,
  type NamedRouteDefinition,
  type RouteComponentContext,
  type RouteNamedMap,
} from '@gluonjs/router';

const productRoute: NamedRouteDefinition<{ id: string }> = { params: { id: '42' } };
const routeContract = { product: productRoute } satisfies RouteNamedMap;
const ProductPage = ({ route }: RouteComponentContext) =>
  html`<h1>Product ${route.params.id}</h1>`;
const lazyProduct: LazyRouteComponent = lazyRoute(async () => ProductPage);

const router = createRouter({
  history: createMemoryHistory(['/products/42']),
  routes: [{ path: '/products/:id', name: 'product', component: lazyProduct }],
});
const matcher = createRouterMatcher([{ path: '/products/:id', name: 'product' }]);
const plugin = createRouterPlugin(router);
const current = router.resolve('/products/42');
const target = router.resolve('/products');
console.log(routeContract.product.params.id, matcher.resolvePath('/products/42'), isRouteActive(current, target), plugin);