File-based routing in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What component renders for the URL /blog/42?

Given this file structure in a SvelteKit project:

src/routes/
├── +page.svelte
├── blog/
│   ├── +page.svelte
│   └── [id]/+page.svelte
└── about/+page.svelte

Which component will render when the user visits /blog/42?

A src/routes/blog/+page.svelte

B src/routes/blog/[id]/+page.svelte

C src/routes/+page.svelte

D src/routes/about/+page.svelte

💡 Hint

Dynamic segments in file names match URL parts like numbers or words.

The URL /blog/42 matches the dynamic route [id] inside the blog folder. So src/routes/blog/[id]/+page.svelte renders.

📝 Syntax

intermediate

Which file name correctly defines a catch-all route?

In SvelteKit file-based routing, which file name correctly matches all routes under /docs, including nested paths like /docs/intro/setup?

A src/routes/docs/[all]/+page.svelte

B src/routes/docs/[all...]/+page.svelte

C src/routes/docs/[...all]/+layout.svelte

D src/routes/docs/[...all]/+page.svelte

💡 Hint

Catch-all routes use three dots inside square brackets.

The catch-all route syntax uses [...name] to match any nested path segments. So [...all] is correct.

🔧 Debug

advanced

Why does /profile show a 404 error?

Given this file structure:

src/routes/
├── +page.svelte
├── profile/[user]/+page.svelte

Visiting /profile shows a 404 error. Why?

A Because <code>profile/+page.svelte</code> is a directory, not a file.

B Because <code>profile/+page.svelte</code> is missing an <code>+layout.svelte</code> file.

C Because <code>profile/+page.svelte</code> is missing.

D Because the <code>profile</code> folder is missing a <code>+page.server.js</code> file.

💡 Hint

The route folder must contain a +page.svelte file directly for the path to work.

In SvelteKit, to serve /profile, the file src/routes/profile/+page.svelte must exist. If profile is a folder, the file must be inside it as +page.svelte. The correct is to have profile/+page.svelte as a file inside the folder.

❓ state_output

advanced

What is the value of params.id for URL /shop/123?

Given this file: src/routes/shop/[id]/+page.svelte with this script:

<script>
  export let params;
</script>

<p>ID: {params.id}</p>

What will be displayed when visiting /shop/123?

A ID: 123

B ID: shop

C ID: undefined

D ID: [id]

💡 Hint

Dynamic segments in the file name become keys in the params object.

The dynamic segment [id] captures the URL part 123 and passes it as params.id.

🧠 Conceptual

expert

Which file handles the route /dashboard/settings/profile?

Given this file structure:

src/routes/
├── dashboard/+layout.svelte
├── dashboard/settings/+page.svelte
├── dashboard/settings/profile/+page.svelte
├── dashboard/settings/profile/+layout.svelte

Which file is responsible for rendering the content at /dashboard/settings/profile?

A src/routes/dashboard/settings/profile/+page.svelte

B src/routes/dashboard/settings/+page.svelte

C src/routes/dashboard/+layout.svelte

D src/routes/dashboard/settings/profile/+layout.svelte

💡 Hint

Layouts wrap pages but do not replace them.

The +page.svelte file renders the page content. Layouts wrap around pages to provide shared UI but do not replace the page content.

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