# Filesystem Routes and Layouts — Svelte / SvelteKit

Source: https://www.skillbyai.com/en/svelte/k-routes

> +page.svelte, +layout.svelte and parameters.

## 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.

![Three ideas: route files, load functions, errors and redirects.](assets/figures/svelte/section-6-map.svg) — Figure 6.1 — URL, route files, load, render.

## A blog route tree

Folders and a layout.

```svelte
<!--
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.

**Quiz:** Which path serves /blog/my-post?

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

*Answer:* src/routes/blog/[slug]/+page.svelte. Brackets mark a dynamic segment.