Why File-based routing in Svelte? - Purpose & Use Cases

The Big Idea

What if your website's navigation built itself as you add files?

The Scenario

Imagine building a website where you have to manually write code to connect every URL path to its page component. For every new page, you must update a big list of routes by hand.

The Problem

Manually managing routes is slow and easy to mess up. Forgetting to add a route or making a typo can break navigation. It's hard to keep track as the site grows, and updating routes everywhere wastes time.

The Solution

File-based routing automatically creates routes from your file structure. Just add a new file in the routes folder, and the route is ready. No extra code needed to connect URLs to pages.

Before vs After

✗ Before

const routes = [{ path: '/home', component: Home }, { path: '/about', component: About }];

✓ After

src/routes/home/+page.svelte  // accessible at /home
src/routes/about/+page.svelte // accessible at /about

What It Enables

This lets you focus on building pages, while the framework handles navigation, making your development faster and less error-prone.

Real Life Example

When adding a new blog post page, just create a new file in the routes folder. The URL matches the file name automatically, so your readers can visit it right away.

Key Takeaways

Manual route setup is tedious and error-prone.

File-based routing links URLs to files automatically.

It speeds up development and reduces mistakes.

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