SvelteKit Routes Explained — Filesystem Routing Deep Dive

In this tutorial, you will learn about SvelteKit Routes Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

SvelteKit's filesystem router uses a convention of +page.svelte, +layout.svelte, +server.js, and other special files to define pages, layouts, and API endpoints.

What You'll Learn

• Route file conventions
• Layout nesting and inheritance
• Route groups for organization
• Optional and rest parameters
• Error and loading pages

Why It Matters

Understanding SvelteKit route files unlocks the full power of the framework: shared layouts, error boundaries, loading states, and type-safe route parameters.

<!-- src/routes/(marketing)/+layout.svelte -->
<nav>
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
  <a href="/about">About</a>
</nav>
<slot />

<!-- src/routes/(app)/+layout.svelte -->
<script>
  import { invalidate } from "$app/navigation";
</script>

<nav>
  <a href="/dashboard">Dashboard</a>
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
</nav>
<main><slot /></main>

<!-- src/routes/blog/[...slug]/+page.svelte -->
<script>
  export let data;
</script>

<h1>{data.post.title}</h1>
<article>{@html data.post.content}</article>

Expected output: Marketing pages share one layout, app pages share another. Catch-all /blog/[...slug] handles nested blog paths.