Filesystem Routes and Layouts

Routes are folders

Each folder under src/routes is a URL segment. +page.svelte is the page component; +layout.svelte wraps every page below it and renders them with {@render children()} (Svelte 4: <slot />); layouts nest. Dynamic segments use brackets: [slug] matches one segment, [[lang]] is optional and [...path] captures the rest. Groups in parentheses such as (marketing) organise routes and layouts without affecting the URL. Pages receive loaded data through the data prop. Navigation uses ordinary <a href> links, which SvelteKit intercepts for client-side routing; goto() from $app/navigation navigates programmatically, and page from $app/state exposes the current URL and params (older code uses the $page store from $app/stores; check the docs for your version).

Files become routes

SvelteKit maps folders in src/routes to URLs and loads data for each page before it renders.

A blog route tree

Folders and a layout.

<!--
src/routes/
  +layout.svelte            -> wraps every page
  +page.svelte              -> /
  about/+page.svelte        -> /about
  blog/+page.svelte         -> /blog
  blog/[slug]/+page.svelte  -> /blog/hello-world
  (app)/dashboard/+page.svelte -> /dashboard (group not in URL)
-->

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { page } from '$app/state';
  let { children } = $props();
</script>

<nav>
  <a href="/" aria-current={page.url.pathname === '/' ? 'page' : undefined}>Home</a>
  <a href="/blog">Blog</a>
</nav>

<main>
  {@render children()}
</main>

Only + files are routes

Other files in a route folder (components, helpers) are ignored by the router, so you can colocate them; shared code usually goes in src/lib.

Quick check: Which path serves /blog/my-post?

• src/pages/blog/[slug].svelte
• src/routes/blog/slug.svelte
• src/routes/blog/[slug]/+page.svelte
• src/routes/blog/+slug.svelte