Svelte Routing Explained — Client-Side Navigation

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

Svelte routing is built into SvelteKit with a file-system based router using the src/routes directory, where each .svelte file becomes a route automatically.

What You'll Learn

• File-based routing in SvelteKit
• Dynamic route parameters
• Layout components
• Navigation with anchor tags and goto
• Route protection patterns

Why It Matters

SvelteKit's filesystem router eliminates routing configuration. Naming a file blog/[slug].svelte creates a dynamic route without any router setup code.

<!-- src/routes/+layout.svelte -->
<script>
  import { page } from "$app/stores";
  import { navigating } from "$app/stores";
</script>

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/about">About</a>
</nav>

{#if $navigating}
  <div class="loading-bar" />
{/if}

<main>
  <slot />
</main>

<!-- src/routes/blog/[slug].svelte -->
<script>
  import { page } from "$app/stores";

  let slug = $page.params.slug;
  let post = await fetch(`/api/posts/${slug}`).then(r => r.json());
</script>

<h1>{post.title}</h1>
<p>{post.content}</p>
<a href="/blog">Back to blog</a>

Expected output: Navigation between pages with a shared layout, loading indicator during navigation, and dynamic blog post pages from route params.