@gluonjs/router / packages/router/src / useRouter

Function: useRouter()

useRouter<Routes>(): Router<Routes>

Type Parameters

Routes

Routes extends RouteNamedMap = RouteNamedMap

Returns

Router<Routes>

Example

Access the application-owned Router from the active render context instead of importing or creating a process-global instance:

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