Live demos

These demos are built on the v2 draft's jotai-atoms router (vendored and adapted for this site - see the demo below, and the v1 History page for why v1 didn't work this way).

• Basic routing — a nested router-within-a-router built from staticRouteAtom/paramRouteAtom and the atoms-based Link/Route components.
• Switch-statement routing — the same job with no routing components at all: a switch on one route atom's value picks the page, and the nav buttons navigate by writing to that atom instead of rendering a Link.
• Blog routing — a classic /blog/:year/:month/:day/:slug tree, hand-composed from numericRouteAtom chained as parent/child, with 404s for out-of-range and non-existent dates.
• Data grid filter/sort — a table whose filter text and sort column live in queryParamRouteAtoms chained off the mount route, so the grid's state is shareable and moves with back/forward navigation.
• Complex routing — custom single-segment path atoms built on routeAtom directly: yyyy-mm-dd gated on the real calendar with validateRouteAtom, and name.ext filenames.
• Cancel navigation on dirty edits — a navigationGuardAtom that vetoes leaving a form with unsaved edits, so ordinary Links, useNavigate and the browser's back/forward buttons are all confirmed alike.
• Async lookup — a route that exists only if an async database lookup finds it, built on asyncRouteAtom: the article it loads arrives on the route's own typed state, and a miss is a real 404 in the server-rendered response.