File-based routing in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route for the home page in SvelteKit.

Svelte

<script>
  // This is the main page component
</script>

<h1>Welcome to the [1] page!</h1>

Drag options to blanks, or click blank then click option'

Amain

Broot

Cindex

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'home' or 'root' as the file name instead of 'index'.

Confusing the file name with the folder name.

In SvelteKit, the home page route is created by naming the file +page.svelte inside the routes folder. The term index is used to represent the root or home page.

2fill in blank

medium

Complete the code to define a dynamic route parameter in SvelteKit.

Svelte

<script>
  import { page } from '$app/stores';
</script>

<p>User ID: {$page.params.[1]</p>

Drag options to blanks, or click blank then click option'

AuserId

Bid

Cparam

Duid

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name than the file name.

Forgetting to export the params prop.

Dynamic route parameters in SvelteKit are defined by wrapping the parameter name in square brackets in the file name, like [id]. The parameter is accessed as $page.params.id.

3fill in blank

hard

Fix the error in the route file name to correctly create a nested route in SvelteKit.

Svelte

routes/[1]/+page.svelte

Drag options to blanks, or click blank then click option'

Aprofile/settings

B[profile]/settings

Cprofile/[settings]

Attempts:

3 left

💡 Hint

Common Mistakes

Putting slashes inside folder names.

Using square brackets incorrectly for static folder names.

To create a nested route, use folders for each level. The folder names should not contain slashes. The correct folder structure is profile/settings with a +page.svelte inside the settings folder.

4fill in blank

hard

Fill both blanks to create a route with a dynamic user ID and a nested settings page.

Svelte

routes/[1]/[2]/+page.svelte

Drag options to blanks, or click blank then click option'

A[userId]

Bsettings

C[settings]

Dprofile

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets for static folder names.

Not using square brackets for dynamic parameters.

The dynamic user ID is represented by a folder named [userId]. The nested settings page is a folder named settings. Together they form the route /[userId]/settings.

5fill in blank

hard

Fill all three blanks to create a route that shows a blog post by slug with an edit page nested inside.

Svelte

routes/blog/[1]/[2]/+page.svelte

// The dynamic slug folder is [3]

Drag options to blanks, or click blank then click option'

A[slug]

Bedit

C[postSlug]

Dedit-post

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect folder names for dynamic parameters.

Confusing the nested edit folder name.

The dynamic slug folder is named [slug]. The nested edit page is a folder named edit. The comment confirms the dynamic folder is [slug].

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