Intercepted routes

The nextgram pattern in SvelteKit: a grid of plain links whose clicks become shallow routing. Each click calls goto(url, { shallow: true, state }) with the photo URL, and the grid renders an already-open, controlled lightbox from that state, so the URL reads /examples/lightbox/intercepted-routes/photos/3 while the grid stays underneath. Browser Back closes it. Hard-loading the same photo URL skips the shallow state entirely and renders the real photos/[id] route, a standalone photo page: one URL, two presentations. Compare with the URL-synced state example, which keeps one presentation (grid + viewer) on refresh and keeps trigger morphs.

See also: State & lifecycle docs

Foggy pine ridge at dawnEmpty coastal highwayNarrow sunlit alleyWide desert dunesCalm lake reflectionTall concrete staircasePanoramic city skyline at duskSingle tree in a green field