Dynamic route parameters in Svelte - Mini Project: Build & Apply

Dynamic Route Parameters in Svelte

📖 Scenario: You are building a simple blog website using Svelte. Each blog post has a unique ID, and you want to create pages that show the details of each post based on the URL.

🎯 Goal: Build a Svelte app that uses dynamic route parameters to display the correct blog post content based on the URL.

📋 What You'll Learn

Create a data structure with blog posts and their IDs

Set up a dynamic route file to capture the post ID from the URL

Use the route parameter to find and display the correct post

Show a message if the post ID does not exist

💡 Why This Matters

🌍 Real World

Dynamic route parameters are used in websites to show different content based on the URL, like user profiles, product pages, or blog posts.

💼 Career

Understanding dynamic routes is essential for building interactive web apps with frameworks like Svelte, React, or Next.js, which is a common skill in frontend development jobs.

1

Create blog posts data

Create a variable called posts that is an array of objects. Each object should have id and title properties with these exact values: { id: '1', title: 'First Post' }, { id: '2', title: 'Second Post' }, and { id: '3', title: 'Third Post' }.

Svelte

# Create the posts array with 3 objects
# Your code here

Hint

Use an array with three objects. Each object needs id and title exactly as shown.

2

Create dynamic route file

Create a Svelte file named [id].svelte inside the src/routes folder. Inside this file, import page from $app/stores and create a reactive variable called postId that gets the id parameter from $page.params.id.

Svelte

const posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' },
  { id: '3', title: 'Third Post' }
];


// Import page store and create postId reactive variable
// Your code here

Hint

Use import { page } from '$app/stores' and a reactive statement $: postId = $page.params.id.

3

Find the post using the route parameter

Inside the [id].svelte file, create a reactive variable called post that finds the object in posts where post.id equals postId.

Svelte

const posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' },
  { id: '3', title: 'Third Post' }
];


  import { page } from '$app/stores';
  $: postId = $page.params.id;

  // Find the post with matching id
  // Your code here

Hint

Use posts.find() to get the post with id matching postId.

4

Display post title or not found message

In the [id].svelte file, add markup inside the <main> tag that shows the post.title if post exists. Otherwise, show the text Post not found.

Svelte

const posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' },
  { id: '3', title: 'Third Post' }
];


  import { page } from '$app/stores';
  $: postId = $page.params.id;
  $: post = posts.find(post => post.id === postId);



  
  

Hint

Use Svelte's {#if} block to show the title or a not found message.

Practice

1. What does a filename like [id].svelte represent in a SvelteKit project?

easy

A. A dynamic route where id is a variable part of the URL

B. A static page named literally 'id'

C. A component that cannot be accessed via URL

D. A special file for global styles

Solution

1. Step 1: Understand filename brackets in SvelteKit

   Square brackets in filenames define dynamic segments in routes, meaning the part inside brackets is a variable.

2. Step 2: Interpret [id].svelte

   This means the page matches URLs like /123 or /abc, where id changes dynamically.

3. Final Answer:

   A dynamic route where id is a variable part of the URL -> Option A

4. Quick Check:

   Filename with brackets = dynamic route [OK]

Hint: Brackets in filename mean dynamic URL part [OK]

Common Mistakes:

• Thinking bracket means static filename
• Confusing dynamic route with component name
• Assuming it is for styles or scripts

2. Which is the correct way to access a dynamic route parameter named slug inside a SvelteKit page component?

easy

A. Using export let params; in the script

B. Using window.slug in the script

C. Using const { slug } = params; inside load function

D. Using this.slug in the component

Solution

1. Step 1: Recall how SvelteKit passes route params

   Dynamic route parameters are passed to the page component as a params prop object.

2. Step 2: Declare the prop in the script

   Inside the page component (+page.svelte) script, use export let params; to receive it, then access params.slug.

3. Final Answer:

   Using export let params; in the script -> Option A

4. Quick Check:

   export let params; receives route params [OK]

Hint: export let params; in page script [OK]

Common Mistakes:

• Using export let slug; (wrong prop name)
• Accessing params from window or this
• Confusing with load function params

3. Given a file named src/routes/blog/[postId].svelte with this code:

  <script>
    export let params;
  </script>

  <h1>Post ID: {params.postId}</h1>

What will be rendered when visiting /blog/42?

medium

A. Post ID: postId

B. Post ID: 42

C. Post ID: {params.postId}

D. Error: params is undefined

Solution

1. Step 1: Understand dynamic route parameter passing

   The [postId].svelte file captures the URL segment after /blog/ as postId and passes it as params.postId.

2. Step 2: Check how params is used in the component

   The component uses {params.postId} inside the heading, so it will display the actual value from the URL.

3. Final Answer:

   <h1>Post ID: 42</h1> -> Option B

4. Quick Check:

   Dynamic param value shown = 42 [OK]

Hint: Dynamic param in URL shows inside {params.paramName} [OK]

Common Mistakes:

• Expecting literal string 'postId' instead of value
• Forgetting to export params
• Using params without export or load

4. You have a dynamic route file [user].svelte but when you visit /john, you get an error: params is undefined. What is the likely cause?

medium

A. You must use window.params to access parameters

B. You named the file incorrectly; it should be {user}.svelte

C. You forgot to export let params in the script

D. Dynamic routes do not support parameters

Solution

1. Step 1: Check how params are accessed in SvelteKit

   Dynamic route parameters are passed as a prop named params which must be exported in the script.

2. Step 2: Identify missing export

   If let params is not exported, the component cannot access it, causing params is undefined.

3. Final Answer:

   You forgot to export let params in the script -> Option C

4. Quick Check:

   Export params to access dynamic route data [OK]

Hint: Always export let params to use route parameters [OK]

Common Mistakes:

• Using curly braces in filename instead of brackets
• Trying to access params from window object
• Assuming dynamic routes don't pass params

5. You want to create a nested dynamic route in SvelteKit to show a user's post detail at URL /user/123/post/456. Which file structure and parameter access is correct?

hard

A. Files: src/routes/user/[userId]/post.svelteAccess: params.userId only

B. Files: src/routes/user/[userId]/post/[postId].svelteAccess: params.user and params.post

C. Files: src/routes/user/post/[postId].svelteAccess: params.userId and params.postId

D. Files: src/routes/user/[userId]/post/[postId].svelteAccess: params.userId and params.postId

Solution

1. Step 1: Understand nested dynamic routes in SvelteKit

   To match URL segments like /user/123/post/456, you create nested folders with dynamic filenames for each variable part.

2. Step 2: Confirm file structure and parameter names

   The correct structure is user/[userId]/post/[postId].svelte, and inside the component, you access params.userId and params.postId.

3. Final Answer:

   Files: src/routes/user/[userId]/post/[postId].svelte and access params.userId and params.postId -> Option D

4. Quick Check:

   Nested dynamic folders match URL segments [OK]

Hint: Use nested folders with brackets for each dynamic segment [OK]

Common Mistakes:

• Using wrong param names inside params object
• Missing nested folder for second dynamic segment
• Trying to access params not defined by filename