Routes are files

SvelteKit maps files in src/routes to URLs. +page.svelte is a page. +layout.svelte wraps pages. [slug] is a dynamic segment. That is the whole model.

Keep layout and data separate

A +page.svelte should render layout. A +page.js should load data. Mixing both in one file works, but it gets hard to read as the page grows.

  • +page.js loads data and returns it.
  • +page.svelte receives data and renders.
  • +layout.svelte wraps pages and shares UI.

Dynamic params

A route like /blog/[slug] receives params.slug in load. That is where you look up the post. If it does not exist, call error(404).

Summary

File-based routing is only surprising when one file does too much. Split load, layout, and page, and the structure stays obvious.