@gluonjs/router / packages/router/src / RouterView

Function: RouterView()

RouterView(__namedParameters?): TemplateValue

Parameters

__namedParameters?

RouterViewProps = {}

Returns

TemplateValue

Example

Render the component matched at a route depth and outlet name, or a fallback when no matching component exists:

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