Dynamic route parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

<script>
  export let [1];
</script>

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

Aid

Bslug

Croute

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name that does not match the filename segment.

Trying to access route parameters without exporting them.

In SvelteKit, dynamic route parameters are passed as props with the same name as the parameter. Here, id matches the dynamic segment in the filename.

2fill in blank

medium

Complete the code to display the dynamic parameter value inside the component.

Svelte

<script>
  export let id;
</script>

<p>Item ID: [1]</p>

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

A{id}

B$id

Cid

D{{id}}

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the variable name without curly braces.

Using double curly braces like in some other frameworks.

In Svelte, to display a variable's value in HTML, you wrap it in curly braces like {id}.

3fill in blank

hard

Fix the error in the route filename to correctly capture a dynamic parameter.

Svelte

src/routes/[1].svelte

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

A<id>

B{id}

C(id)

D[id]

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces or parentheses instead of square brackets.

Not matching the parameter name with the exported prop.

SvelteKit uses square brackets around the filename to define dynamic route parameters, like [id].svelte.

4fill in blank

hard

Fill both blanks to create a nested dynamic route and access its parameters.

Svelte

<script>
  export let [1];
  export let [2];
</script>

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

Acategory

Bpost

Cslug

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Exporting parameters that don't match the route segments.

Forgetting to export one of the parameters.

For nested dynamic routes like [category]/[slug].svelte, you export both parameters category and slug.

5fill in blank

hard

Fill all three blanks to create a dynamic route and display all parameters in the component.

Svelte

<script>
  export let [1];
  export let [2];
  export let [3];
</script>

<p>Category: {category}</p>
<p>Post: {post}</p>
<p>Comment ID: {commentId}</p>

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

Acategory

Bpost

CcommentId

Dslug

Attempts:

3 left

💡 Hint

Common Mistakes

Not exporting all parameters.

Using wrong parameter names that don't match the route.

For a route like [category]/[post]/[commentId].svelte, export all three parameters to use them inside the component.