File-Based Routing — SvelteKit Tutorial

In SvelteKit, you don't write a routes table anywhere. The folder structure under src/routes is the routing table — a page exists at a URL because a +page.svelte file exists at the matching path.

The basic mapping

src/routes/
├── +page.svelte              → /
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Each folder is a URL segment, and a +page.svelte inside it makes that segment a renderable page. A folder with no +page.svelte isn't a page itself — it might still contain child routes, or hold a shared +layout.svelte.

Why the +page.svelte convention

You might expect about/index.svelte (like some file-based routers use) rather than about/+page.svelte. SvelteKit's + prefix exists so a route folder can hold several special files side by side without name collisions:

about/
├── +page.svelte          # the UI for this route
├── +page.js              # runs on server and client, loads data
└── +page.server.js       # runs only on the server

All three can coexist because they're distinguished by the + prefix rather than folder position — a pattern that becomes essential once you add layouts, error pages, and API endpoints, which we'll cover in later lessons.

Nesting and layouts preview

Routes nest naturally by nesting folders:

src/routes/
└── blog/
    ├── +page.svelte           → /blog
    └── first-post/
        └── +page.svelte       → /blog/first-post

Nothing links these two pages together automatically beyond sharing the /blog URL prefix — but if you add a +layout.svelte inside blog/, every page nested under it (including /blog itself) renders inside that layout. We cover layouts in their own lesson, but it's worth knowing now: nesting folders is also how you nest shared UI.

Linking between routes

SvelteKit doesn't require a special <Link> component the way some frameworks do — a plain <a> tag is enough, and SvelteKit intercepts the click to do a client-side navigation instead of a full page reload:

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

This works because SvelteKit progressively enhances ordinary HTML rather than replacing it — the same link works even if JavaScript fails to load, just falling back to a normal browser navigation.

A route that renders nothing by default

An empty +page.svelte is a valid page:

<h1>Contact us</h1>
<p>Email us at hello@example.com.</p>

There's no data, no logic — just markup. That's the point: routing is entirely about which component renders for which URL. Getting data into that component before it renders is the job of load functions, which the next few lessons build up to, starting with dynamic route segments.