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.