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.
Previous
How do you implement real-time features in SvelteKit?
Next
How does SvelteKit handle static asset optimization?
More Svelte / SvelteKit Questions
View all →- Advanced How does Svelte 5's reactivity model with $state differ from Svelte 4?
- Advanced What is SvelteKit's data loading waterfall problem and how do you solve it?
- Advanced How do you implement real-time features in SvelteKit?
- Advanced How does SvelteKit handle static asset optimization?
- Advanced What is Svelte's approach to accessibility?