Client-Side Routing

The table stores a function that fetches that route's code on demand rather than a component the start-up bundle already contains. The router calls it on the first navigation that matches, waits, then renders what it resolves to.

Render a link whenever the destination is known before the click: keyboard activation, open-in-new-tab, copy-address and a working fallback come free. Navigate in code only when code, not the user, picks the destination after an event.

An outlet is a marked position a parent route's component renders, and the router mounts whichever child route matched the deeper part of the URL into that position. The parent draws the shared chrome around it.

The URL should carry state a user could reasonably share, bookmark or reach again with the Back button: the view, the selected entity, filters, sort and page. Transient interface state, secrets and large payloads stay in memory.

Because the redirect is scheduled from a side effect that runs only after the wrapper's subtree has rendered and its data requests have gone out. Deciding in the router's navigation step, before the target renders, removes the flash.

Who owns the pending period. A router that holds the navigation keeps the old screen mounted with a progress cue; one that commits the new branch immediately shows the nearest async boundary's fallback instead.

A URL is text and a pattern checks only path shape, so every captured value is untrusted input. The route entry converts it into typed data once, at that boundary, and takes a failure branch when conversion fails.

Leave anything the browser handles differently: a non-primary or modified click, a link aimed at another tab or frame, a download, another origin or scheme, a same-document fragment. Intercepting those breaks behaviour users rely on.

Every level the two matches share stays mounted and is updated in place, so the parent's component instance and its state survive. Only the deepest level that differs is torn down and replaced inside its outlet.

Register a blocker while the form is dirty: the router consults it before committing any navigation it controls, holding the transition open until the user answers. A real document unload can only be asked about, never blocked.

The chrome is not on a level both URLs share, so it is rebuilt on each navigation — usually because each screen renders its own copy, or because its level sits at or below the point where the two matches diverge.

A cold deep link starts with nothing but the address: no loaded records, no parent context, no earlier session selections. The screen must resolve every identifier itself, render a real loading state, and handle missing or mismatched targets.

A dynamic segment matches exactly one path segment and stops at the next separator. A catch-all matches the whole remainder of the path, separators included, and hands that leftover over as the captured value.

The guard collapses "not known yet" into "signed out". A session restored asynchronously is still unresolved during the first navigation after a reload, so the guard must await one shared resolution and model three states, not a boolean.

A route's loader sits in the route table, so a URL alone names the modules the next screen needs. A lazy component's loader is reached only by rendering its parent, so no link can preload it.

It resolves a link's URL through the route table, then calls the matched entries' loaders early without navigating. Typical triggers are pointer hover or touch start, keyboard focus, the link entering the viewport, and idle time.

The parent consumes a path prefix, so its children are matched only against the remainder, and only if the parent matched at all. A failing parent skips its whole branch, and its captured parameters stay visible below.

Failing to match is a routing outcome, not a rendering detail. An entry is reached when matching fails or a matched entry rejects its value, before any route's work runs, and one place then owns the missing-page screen.

Pushing leaves the pre-redirect address on the stack, so Back lands on it, the same condition redirects again, and the user is pushed forward. A navigation that corrects the current location must replace that entry, not add one.

Both add no URL segment. An index child fills its parent's outlet when the URL stops at the parent. A pathless layout route adds a component level with its own chrome and boundaries while leaving its children's URLs untouched.

The path carries identity - which screen and which entity. The query string carries refinements of that identity, such as search, filters, sort and page. The fragment carries client-only position or state and is never sent to the server.

Pick one short text spelling per value, omit anything equal to its default, emit keys in a fixed order, and make parsing the exact inverse, so a reload reproduces the screen and one state always produces one address.

Routers normally run a matched chain's guards from the outermost route inward, stopping at the first redirect or cancel. A parent can establish the session and a child narrow by role — but only for chains that include that parent.

Capture the intended internal target when the guard redirects, carry it on the sign-in URL or the history entry's state, and treat it as untrusted: accept only a path on this origin, else a default.

The open document carries the old build's bundle filenames, and the deploy removed those files, so the loader's request misses. Recover at a route-level failure path: retry once or twice, then reload the document once, guarded so it cannot loop.

Give every entry an identity and build paths through the table: name the entry, supply its required parameters, let the helper encode them. A rename breaks the definition and every stale call site at build time, not at click time.

Because the next screen is rarely ready when the address changes. A pending transition keeps the current screen visible and interactive, and can be abandoned when a second navigation supersedes it, so a slow first one cannot commit late.

A client-side commit resets nothing by itself, so the router needs a policy: top for a new destination, the saved offset for that history entry on a traversal, unchanged for a refinement, focus and title per route.

Two copies of one value drift apart. Back and Forward change the address while the panel keeps its stale copy, and code that syncs both directions can loop. Make the address authoritative and derive the displayed values from it.