Application recipes APPLICATION RECIPE

Router setup

A real multi-file router starter with pages and a working iframe preview.

SOURCE INCLUDEDBrowse library

Component studio/ router-setup

PREVIEW SOURCE

PreviewROUTER EXAMPLE

Try the component here. Changes stay in your browser.

Source codeREAD ONLY / COPY READY

router.tsx

Router.tsx

Copy this exact source file into your Zidom project.

router.tsx

● Zidom

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);}

router-home.tsx

Home.tsx

Copy this exact source file into your Zidom project.

router-home.tsx

● Zidom

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>  );}

router-profile.tsx

Profile.tsx

Copy this exact source file into your Zidom project.

router-profile.tsx

● Zidom

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>  );}

YOUR NEXT STEP

Make it yours.

Everything you see above is real Zidom code. Choose a source file, copy it, and adapt it in your project.

Application-level recipe: copy all three TSX files and mount your router in the app entry point. A router guard is a client-side UI check, not backend authorization. See routing docs for guards and loaders.

← Explore more components Report an issue ↗