@gluonjs/router / packages/router/src / RouterLinkProps

Interface: RouterLinkProps<Routes>

Type Parameters

Routes

Routes extends RouteNamedMap = RouteNamedMap

Properties

activeClass?

readonly optional activeClass?: string

ariaCurrentValue?

readonly optional ariaCurrentValue?: string

attributes?

readonly optional attributes?: Readonly<Record<string, unknown>>

children?

readonly optional children?: TemplateValue

exactActiveClass?

readonly optional exactActiveClass?: string

replace?

readonly optional replace?: boolean

to

readonly to: RouteLocationRaw<Routes>

Example

Configure a Router link's destination, replacement behavior, active classes, ARIA state, native attributes, and visible content:

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