How File-Based Routing Works | Build BookIt with Svelte 5

Your Folder Structure IS Your Router

In traditional frameworks, you define routes in a configuration file — mapping URLs to components. SvelteKit takes a different approach: your folder structure inside src/routes directly becomes your URL structure. Create a folder, get a route.

What You’ll Learn

How SvelteKit maps folders to URLs
The role of +page.svelte files
Why this approach simplifies development

The Mental Model

Think of the src/routes folder as your website’s URL structure:

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

Every folder becomes a URL segment. Every +page.svelte file becomes the page content for that URL.

The Rules

SvelteKit’s routing follows three simple rules:

Rule 1: Folders create URL segments

A folder named about creates the /about route. A folder named services creates /services. Nested folders create nested routes — services/pricing becomes /services/pricing.

Rule 2: +page.svelte renders the page

The +page.svelte file contains the component that renders when someone visits that route. Without this file, the route doesn’t exist as a visitable page.

Rule 3: The root +page.svelte is your homepage

The +page.svelte directly inside src/routes (not in any subfolder) renders at / — your site’s homepage.

Why File-Based Routing?

Coming from React Router or Vue Router, you might wonder why SvelteKit uses this approach.

No configuration drift. Your routes are your files. You can’t forget to register a route because creating the file is registering the route.

Visual clarity. Glancing at your folder structure shows you every page in your app. New team members can understand your site structure immediately.

Colocation. Each route folder can contain its page, data loading logic, and related files — everything for that route lives together.

What About BookIt?

Right now, BookIt only has a homepage. By the end of this module, you’ll have:

src/routes/
├── +page.svelte              → / (Welcome to BookIt)
├── services/
│   ├── +page.svelte          → /services (Browse all services)
│   └── [slug]/
│       └── +page.svelte      → /services/lawn-mowing (Service detail)
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Users will be able to navigate between pages to explore your booking platform.

Common Mistakes

Forgetting `+page.svelte`

src/routes/
└── about/
    └── About.svelte    ← This won't work!

SvelteKit looks specifically for +page.svelte. A file named About.svelte won’t create a route — it’s just a component file that could be imported elsewhere.

src/routes/
└── about/
    └── +page.svelte    ← Correct!

The + prefix is intentional. It signals to SvelteKit (and to you) that this file has special meaning in the routing system.

Summary

SvelteKit’s file-based routing means your project structure is your URL structure. Create a folder, add +page.svelte, and you have a route. No configuration files, no registration steps.

Key takeaways:

Folders inside src/routes become URL segments
+page.svelte files render page content
The + prefix marks files with special routing behavior

Next Steps

Now that you understand how routing works, let’s create the first real page for BookIt. Continue with Create About Page where we’ll add the /about route.