@gluonjs/router / packages/router/src / RouteComponentContext

Interface: RouteComponentContext

Properties

record

readonly record: RouteRecordNormalized

route

readonly route: RouteLocationNormalized

router

readonly router: Router<RouteNamedMap>

Example

Read the resolved route, Router, and matched record supplied to a route component at render time:

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);