@gluonjs/router / packages/router/src / RouterLink

Function: RouterLink()

RouterLink<Routes>(props): TemplateValue

Type Parameters

Routes

Routes extends RouteNamedMap = RouteNamedMap

Parameters

props

RouterLinkProps<Routes>

Returns

TemplateValue

Example

Render an accessible anchor that resolves through the installed Router and intercepts eligible clicks for client-side navigation:

import { createApp, html, inject } from '@gluonjs/core';
import {
  RouterLink,
  RouterView,
  createMemoryHistory,
  createRouter,
  createRouterPlugin,
  routerKey,
  useRoute,
  useRouter,
  type RouterLinkProps,
  type RouterViewProps,
} from '@gluonjs/router';

const router = createRouter({
  history: createMemoryHistory(['/shop']),
  routes: [{ path: '/shop', component: () => html`<h1>Shop</h1>` }],
});
const link = { to: '/shop', children: 'Shop', activeClass: 'is-active' } satisfies RouterLinkProps;
const view = { fallback: html`<p>Not found</p>` } satisfies RouterViewProps;
const app = createApp(() => {
  const current = useRoute();
  console.log(useRouter() === inject(routerKey), current.fullPath);
  return html`<nav>${RouterLink(link)}</nav><main>${RouterView(view)}</main>`;
});
app.use(createRouterPlugin(router));
app.mount(document.querySelector('#app')!);