Router & History API

import { createRouter, type Route } from '@zidomjs/router';import { RouterHome } from './router-home';import { RouterProfile } from './router-profile';// The demo runs in an iframe so History API navigation leaves the docs URL alone.let navigate: (path: string) => void = () => {};const routes: Route<Record<string, never>>[] = [  {    path: '/lab/router/',    component: () => <RouterHome onNavigate={navigate} />  },  {    path: '/lab/router/profile/',    component: () => <RouterProfile onNavigate={navigate} />  },  {    path: '*',    component: () => <p role="status">Page not found</p>  }];export function mountRouterDemo(host: HTMLElement) {  const router = createRouter({ routes, context: {} });  navigate = path => { void router.navigate(path); };  return router.mount(host);}

type RouterPageProps = {  onNavigate: (path: string) => void;};export function RouterHome({ onNavigate }: RouterPageProps) {  return (    <div className="example-card">      <h2>Router home</h2>      <p>This page is rendered by the Zidom router.</p>      <a        href="/lab/router/profile/"        onClick={(event: Event) => {          event.preventDefault();          onNavigate('/lab/router/profile/');        }}      >        Go to profile      </a>    </div>  );}

type RouterPageProps = {  onNavigate: (path: string) => void;};export function RouterProfile({ onNavigate }: RouterPageProps) {  return (    <div className="example-card">      <h2>Profile route</h2>      <p>History changed inside the iframe, not in the docs page.</p>      <a        href="/lab/router/"        onClick={(event: Event) => {          event.preventDefault();          onNavigate('/lab/router/');        }}      >        Back to router home      </a>    </div>  );}