What is the SvelteKit shallow routing feature?

Answer

Shallow routing (introduced in SvelteKit 1.15+) allows pushing URL changes to the browser history without triggering a full page navigation (no load functions re-run). It is used for modals, drawers, and dialogs that should be URL-addressable (sharing the URL reopens the modal) without replacing the entire page. Use replaceState or pushState from $app/navigation: import { pushState } from '$app/navigation'; pushState('?photo=1', { showModal: true });. The state object is available in $page.state: {#if $page.state.showModal} <Modal /> {/if}. On popstate (back button), SvelteKit restores the previous state. This enables patterns like: clicking a product card changes the URL to ?product=123, showing a modal with details. Closing the modal goes back. Sharing the URL shows the same modal. This is the native browser way to handle stateful UI without heavyweight routing libraries.