Skip to content
Svelte Deep Dive

Routing & Pages

Folders are routes

Section titled “Folders are routes”

In SvelteKit, the folder structure under src/routes/ is the URL structure. A +page.svelte file makes its folder a navigable page.

src/routes/
├── +page.svelte              →  /
├── about/
│   └── +page.svelte          →  /about
├── blog/
│   ├── +page.svelte          →  /blog
│   └── [slug]/
│       └── +page.svelte      →  /blog/:slug   (dynamic)
└── +layout.svelte            →  wraps every page
flowchart LR
  f1["routes/+page.svelte"] --> u1["/"]
  f2["routes/about/+page.svelte"] --> u2["/about"]
  f3["routes/blog/[slug]/+page.svelte"] --> u3["/blog/:slug"]
Folders map to URLs

Dynamic parameters

Section titled “Dynamic parameters”

Square brackets in a folder name capture a URL segment. src/routes/blog/[slug]/+page.svelte matches /blog/hello, and the value is available as params.slug (in a load function — next lesson). Variations:

  • [slug] — a required parameter.
  • [...rest] — a rest parameter that matches multiple segments (/docs/a/b/c).
  • [[optional]] — an optional parameter that also matches when absent.

Layouts wrap pages

Section titled “Layouts wrap pages”

A +layout.svelte applies to its folder and every route beneath it — the place for shared chrome like a header and footer. It renders its child route through the children snippet:

src/routes/+layout.svelte
<script>
  let { children } = $props();   // the active child page
</script>


<nav>…site navigation…</nav>


<main>
  {@render children()}           <!-- the current page renders here -->
</main>


<footer>© 2026</footer>

Layouts nest: a layout deeper in the tree wraps inside the ones above it, so you can compose a global shell with section-specific shells.

Error pages and navigation

Section titled “Error pages and navigation”
  • +error.svelte in a folder renders when a load in that subtree throws — a scoped error boundary. It reads the error via page.error (from $app/state).
  • Navigation uses ordinary <a href="/blog"> links; SvelteKit intercepts them for fast client-side navigation (no full reload). For programmatic navigation, call goto('/blog') from $app/navigation.
<script>
  import { goto } from '$app/navigation';
</script>


<a href="/about">About</a>                     <!-- client-side nav -->
<button onclick={() => goto('/dashboard')}>Go</button>
How is a page route defined in SvelteKit?
What does the folder `src/routes/blog/[slug]/` create?
What is `+layout.svelte` for?
How do you navigate programmatically in SvelteKit?