@gluonjs/router / packages/router/src / createRouter
Function: createRouter()
createRouter<
Routes>(options):Router<Routes>
Type Parameters
Routes
Routes extends RouteNamedMap = RouteNamedMap
Parameters
options
Returns
Router<Routes>
Example
Create a Router that owns URL resolution, typed navigation, route readiness, and component loading over a caller-owned history:
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);