File-based routing in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is file-based routing in Svelte?

File-based routing means the app creates routes automatically based on the file names and folder structure inside the src/routes folder.

beginner

How does SvelteKit map a file named src/routes/about/+page.svelte to a URL?

The file about/+page.svelte becomes the page at URL /about automatically.

intermediate

What does a file named [id]/+page.svelte inside src/routes represent?

It represents a dynamic route where id is a variable part of the URL, like /123 or /abc.

beginner

How do nested folders inside src/routes affect routing?

Nested folders create nested URL paths. For example, src/routes/blog/post/+page.svelte maps to /blog/post.

beginner

What special file name is used to create the homepage in SvelteKit?

The file src/routes/+page.svelte creates the homepage at /.

In SvelteKit, what URL does src/routes/contact/+page.svelte map to?

A /contact.svelte

B /src/routes/contact

C /contact

D /contact/index

+page.svelte files inside src/routes map directly to URLs matching their folder path.

What does a file named [slug]/+page.svelte inside src/routes/blog represent?

A An error page

B A static page at /blog/slug

C A nested folder named slug

D A dynamic route matching /blog/anything

Square brackets create dynamic routes where the part inside brackets is a variable.

How do you create a nested route for /shop/products in SvelteKit?

A Create <code>src/routes/shop/products/+page.svelte</code>

B Create <code>src/routes/shop-products.svelte</code>

C Both A and D are correct

D Create <code>src/routes/shop/products/index.svelte</code>

Nested folders with +page.svelte create nested routes. For example, src/routes/shop/products/+page.svelte maps to /shop/products.

Which file creates the homepage route / in SvelteKit?

A src/routes/home.svelte

B src/routes/+page.svelte

C src/routes/index.svelte

D Both B and C

+page.svelte in the root routes folder creates the homepage.

What happens if you add a file named about/+page.svelte inside src/routes?

A It creates a route at /about

B It creates a route at /about/+page

C It causes an error

D It is ignored

The +page.svelte file inside a folder defines the page for that folder's route.

Explain how file names and folder structure inside src/routes define the URLs in SvelteKit.

Think about how a website's pages are organized like folders and files on your computer.

Describe how you would create a dynamic blog post page that shows different posts based on the URL.

Imagine the URL changes but the page layout stays the same.

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