Router · hash

This whole site is a router demo — the sidebar links set the URL hash and the page swaps with zero re-render. Try these:

Get started Buttons Calendar

Usage

import { Router, Link, navigate, html } from "./index.js";

const routes = [
  { path: "/",          component: () => html`<p>Home</p>` },
  { path: "/about",     component: () => html`<p>About</p>` },
  { path: "/users/:id", component: (p) => html`<p>User #${() => p.params().id}</p>` },
];

html`
  ${Link({ to: "/about", children: "About", activeClass: "active" })}
  ${Router(routes, () => html`<p>404</p>`)}
`
// navigate("/users/7") works imperatively too.