Dynamic route parameters in Svelte - Step-by-Step Execution

Concept Flow - Dynamic route parameters

User visits URL

↓

Router checks route patterns

↓

Match dynamic segment like /user/[id

↓

Extract parameter value from URL

↓

Pass parameter to component

↓

Component renders using parameter

When a user visits a URL with dynamic parts, the router finds the matching pattern, extracts the parameter, and passes it to the component to render.

Execution Sample

Svelte

<script>
  export let id;
</script>

<h1>User ID: {id}</h1>

This Svelte component receives a dynamic route parameter 'id' and displays it.

Execution Table

Step	URL Visited	Route Pattern Matched	Parameter Extracted	Component Render Output
1	/user/42	/user/[id]	id = '42'	<h1>User ID: 42</h1>
2	/user/abc	/user/[id]	id = 'abc'	<h1>User ID: abc</h1>
3	/user/	No match	No parameter	No component rendered

💡 Routing stops when no matching dynamic route pattern is found.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
id	undefined	'42'	'abc'	undefined

Key Moments - 2 Insights

Why does the component receive 'id' as a string even if the URL looks like a number?

Because URL parts are always strings. The router extracts the parameter as text, as shown in execution_table rows 1 and 2.

What happens if the URL does not match the dynamic route pattern?

No parameter is extracted and the component does not render, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'id' at Step 2?

A '42'

B undefined

C 'abc'

D null

💡 Hint

Check the 'Parameter Extracted' column at Step 2 in the execution_table.

At which step does the routing fail to find a matching pattern?

A Step 3

B Step 2

C Step 1

D None

💡 Hint

Look at the 'Route Pattern Matched' column in the execution_table.

If the URL was '/user/123', what would the component render?

A <h1>User ID: id</h1>

B <h1>User ID: 123</h1>

C <h1>User ID: undefined</h1>

D No component rendered

💡 Hint

Refer to how the parameter 'id' is extracted and used in the component from the execution_sample and execution_table.

Concept Snapshot

Dynamic route parameters in Svelte use brackets in filenames like [id].
When a URL matches, the router extracts the part in place of [id] as a string.
This value is passed as a prop to the component.
The component accesses it via 'export let id;'.
Use this to render dynamic content based on URL parts.

Full Transcript

Dynamic route parameters let Svelte components receive parts of the URL as variables. When a user visits a URL like /user/42, the router matches the pattern /user/[id], extracts '42' as the id parameter, and passes it to the component. The component declares 'export let id;' to receive this value and can display it in the page. If the URL does not match the pattern, no parameter is extracted and the component does not render. The parameter is always a string, even if it looks like a number. This allows building pages that change content based on URL parts easily.

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