File-based Routing with +page.svelte
Map file paths under src/routes to URL paths automatically.
File-based Routing with +page.svelte is a free Sveltejs Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
File = Route
SvelteKit maps folders under src/routes to URL paths. A +page.svelte file defines a route.
Root Page
src/routes/+page.svelte renders at /.
About Page
src/routes/about/+page.svelte renders at /about.
Nested Routes
Folders nest. src/routes/blog/posts/+page.svelte renders at /blog/posts.
Page Component
The file is a regular Svelte component. Use any feature you have learned.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>Routing Convention
Filenames starting with + have special meaning to SvelteKit. +page, +layout, +server, etc.
No Imports Needed
You do not register routes manually. The file system is the router.
Programmatic Navigation
Use goto from $app/navigation to navigate in code.
import { goto } from "$app/navigation";
goto("/about");Link Component
Use plain <a href> tags; SvelteKit intercepts them for client-side navigation.
Pre-fetching
Use data-sveltekit-preload-data on a link for hover-triggered prefetching.
404 Page
Create src/routes/+error.svelte to customize the not-found page.
Quick Check
Where do you create a /products route?
Recap
The file system defines routes. +page.svelte in any folder under src/routes becomes a route.
Frequently asked questions
Is the “File-based Routing with +page.svelte” lesson free?
Yes — the full text of “File-based Routing with +page.svelte” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “File-based Routing with +page.svelte”?
Map file paths under src/routes to URL paths automatically. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “File-based Routing with +page.svelte” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- File-based Routing with +page.svelte
- Dynamic Route Parameters: [id]
- Optional and Rest Parameters
- Layout Files: +layout.svelte