@gluonjs/router / packages/router/src / RouterMatcher

Interface: RouterMatcher

Methods

addRoute()

addRoute(record, parentName?): () => void

Parameters

record

RouteRecordRaw

parentName?

string

Returns

() => void

getRoutes()

getRoutes(): readonly RouteRecordNormalized[]

Returns

readonly RouteRecordNormalized[]

hasRoute()

hasRoute(name): boolean

Parameters

name

string

Returns

boolean

removeRoute()

removeRoute(name): void

Parameters

name

string

Returns

void

resolveName()

resolveName(name, params?): MatcherResolution

Parameters

name

string

params?

Readonly<Record<string, RouteParamValue | null | undefined>>

Returns

MatcherResolution

resolvePath()

resolvePath(path): MatcherResolution | undefined

Parameters

path

string

Returns

MatcherResolution | undefined

Example

Add, remove, inspect, and resolve route records without creating history or performing a navigation:

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