File-based routing in Svelte - Step-by-Step Execution

Concept Flow - File-based routing

Create file in routes folder

↓

File name defines URL path

↓

SvelteKit reads files

↓

Generate route automatically

↓

User visits URL

↓

Render matching component

↓

Show page content

File-based routing means the file name and location in the routes folder decide the URL path automatically.

Execution Sample

Svelte

// File: src/routes/about.svelte
<script>
  let message = 'Welcome to About page';
</script>
<h1>{message}</h1>

This code creates an About page at URL /about showing a welcome message.

Execution Table

Step	Action	File/URL	Result
1	Create file about.svelte in src/routes	N/A	Route /about is defined
2	SvelteKit reads routes folder	src/routes/about.svelte	Registers /about route
3	User visits /about URL	/about	SvelteKit matches route
4	Render about.svelte component	/about	Page shows 'Welcome to About page'
5	User visits / URL	/	No about.svelte match, default route used
6	Create file index.svelte in src/routes	N/A	Route / is defined
7	User visits / URL again	/	Page shows content from index.svelte

💡 Routing stops when matching file component is found or default route is used.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 6	After Step 7
routes	empty	['about.svelte']	['about.svelte']	['about.svelte']	['about.svelte']	['about.svelte', 'index.svelte']	['about.svelte', 'index.svelte']
currentURL	none	none	none	/about	/about	/	/
renderedComponent	none	none	none	about.svelte	about.svelte	none	index.svelte

Key Moments - 3 Insights

Why does creating a file named about.svelte create a route at /about?

Because SvelteKit uses the file name in the routes folder to automatically create the URL path, as shown in execution_table step 1 and 2.

What happens if there is no index.svelte file for the root URL?

No route matches /, so the app shows a 404 or fallback page until index.svelte is created, as seen in execution_table step 5 and 6.

How does SvelteKit know which component to render when visiting a URL?

It matches the URL path to the file name in the routes folder and renders that component, shown in execution_table steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered when the user visits /about?

A about.svelte

B index.svelte

C No component

D default.svelte

💡 Hint

Check execution_table step 4 where /about URL is matched and renderedComponent is about.svelte.

At which step does the route for / get defined?

A Step 1

B Step 6

C Step 3

D Step 7

💡 Hint

Look at execution_table step 6 where index.svelte is created defining the / route.

If you rename about.svelte to contact.svelte, what changes in the routing?

A Route /about still works

B Both /about and /contact routes exist

C Route /contact is created instead of /about

D No routes exist

💡 Hint

File name defines URL path as explained in concept_flow and shown in variable_tracker routes array.

Concept Snapshot

File-based routing in SvelteKit means:
- Files in src/routes folder create URL paths
- File name matches the URL segment
- index.svelte is the root route /
- No extra config needed
- Visit URL, matching file renders automatically

Full Transcript

File-based routing in SvelteKit works by placing .svelte files inside the src/routes folder. Each file name becomes a URL path segment automatically. For example, about.svelte creates the /about route. When a user visits a URL, SvelteKit matches it to the file and renders that component. The root URL / is matched by index.svelte. If no matching file exists, the route is not found. This system requires no manual route setup, making it simple and intuitive. The execution table shows creating files, visiting URLs, and rendering components step-by-step. Variables track the routes available, current URL, and which component renders. Common confusions include why file names define URLs and what happens if index.svelte is missing. The visual quiz tests understanding of these steps and effects of renaming files. This method helps beginners see how file structure controls routing in SvelteKit.

Practice

1. What does a +page.svelte file inside src/routes represent in SvelteKit?

easy

A. A page that users can visit via a URL

B. A component that cannot be accessed directly

C. A configuration file for routing

D. A style sheet for the app

Solution

1. Step 1: Understand the role of +page.svelte

   In SvelteKit, +page.svelte files define pages that users can visit through URLs.

2. Step 2: Connect file location to URL

   Files inside src/routes map directly to URL paths, so +page.svelte creates a page at that path.

3. Final Answer:

   A page that users can visit via a URL -> Option A

4. Quick Check:

   File-based routing means files = pages [OK]

Hint: Remember: +page.svelte files become pages [OK]

Common Mistakes:

• Thinking +page.svelte is just a component
• Confusing routing config with page files
• Assuming styles are defined in +page.svelte

2. Which of the following is the correct way to create a dynamic route for a user profile page in SvelteKit?

easy

A. src/routes/user/id/+page.svelte

B. src/routes/user/{id}/+page.svelte

C. src/routes/user/:id/+page.svelte

D. src/routes/user/[id]/+page.svelte

Solution

1. Step 1: Identify dynamic route syntax in SvelteKit

   SvelteKit uses square brackets [param] to define dynamic route parameters.

2. Step 2: Match the correct folder structure

   The folder src/routes/user/[id] captures the id part dynamically for user profiles.

3. Final Answer:

   src/routes/user/[id]/+page.svelte -> Option D

4. Quick Check:

   Dynamic routes use square brackets [OK]

Hint: Use square brackets for dynamic route folders [OK]

Common Mistakes:

• Using curly braces or colons instead of square brackets
• Placing dynamic parameter in file name instead of folder
• Omitting the +page.svelte file

3. Given the folder structure:

src/routes/
  +page.svelte
  about/+page.svelte
  blog/[slug]/+page.svelte

What URL will render the blog/[slug]/+page.svelte page when visiting /blog/hello-world?

medium

A. /blog/slug/hello-world

B. /blog/[slug]

C. /blog/hello-world

D. /blog/hello-world/+page

Solution

1. Step 1: Understand dynamic route matching

   The folder blog/[slug] matches any URL starting with /blog/ followed by any value as slug.

2. Step 2: Match URL to folder structure

   The URL /blog/hello-world matches the dynamic route [slug] with slug = 'hello-world'.

3. Final Answer:

   /blog/hello-world -> Option C

4. Quick Check:

   Dynamic folder matches URL part directly [OK]

Hint: Dynamic folders match URL parts exactly [OK]

Common Mistakes:

• Confusing literal folder names with dynamic parameters
• Expecting the URL to include brackets
• Adding extra path segments incorrectly

4. You created a file src/routes/blog/[id].svelte instead of src/routes/blog/[id]/+page.svelte. What will happen when you visit /blog/123?

medium

A. The page will not load; routing fails because the file is misplaced

B. The page loads correctly showing the blog with id 123

C. A syntax error occurs during build

D. The app shows a 404 page

Solution

1. Step 1: Check correct file placement for routing

   SvelteKit requires dynamic routes to be folders with +page.svelte inside, not files named with brackets.

2. Step 2: Understand routing failure

   Placing [id].svelte as a file breaks routing because SvelteKit expects [id] as a folder.

3. Final Answer:

   The page will not load; routing fails because the file is misplaced -> Option A

4. Quick Check:

   Dynamic routes need folders with +page.svelte [OK]

Hint: Dynamic routes must be folders with +page.svelte inside [OK]

Common Mistakes:

• Naming dynamic routes as files instead of folders
• Expecting SvelteKit to accept bracketed filenames
• Ignoring folder structure rules for routing

5. You want to create nested routes for category pages (/shop/electronics) and product pages (/shop/electronics/123) with a dynamic category and product ID. Which folder structure correctly implements this in SvelteKit?

hard

A. src/routes/shop/[category]/[product]/+page.svelte

B. src/routes/shop/[category]/+page.svelte and src/routes/shop/[category]/[product]/+page.svelte

C. src/routes/shop/[category]-[product]/+page.svelte

D. src/routes/shop/+page.svelte with query params for category and product

Solution

1. Step 1: Understand nested dynamic routes

   To handle URLs like /shop/electronics (category) and /shop/electronics/123 (product), you need nested folders: one for [category] and inside it one for [product].

2. Step 2: Confirm folder structure with pages

   Each folder can have its own +page.svelte. So src/routes/shop/[category]/+page.svelte can show category info, and src/routes/shop/[category]/[product]/+page.svelte shows product details.

3. Final Answer:

   src/routes/shop/[category]/+page.svelte and src/routes/shop/[category]/[product]/+page.svelte -> Option B

4. Quick Check:

   Nested folders for nested dynamic routes [OK]

Hint: Use nested folders for nested dynamic routes [OK]

Common Mistakes:

• Putting multiple params in one folder name
• Using query params instead of folder structure
• Not nesting folders for nested routes