Dynamic route parameters in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output for this dynamic route?

Given a SvelteKit route file named src/routes/blog/[slug].svelte with the following code, what will be displayed when navigating to /blog/hello-world?

Svelte

<script>
  export let params;
</script>

<h1>Blog Post: {params.slug}</h1>

A <h1>Blog Post: </h1>

B <h1>Blog Post: [slug]</h1>

C <h1>Blog Post: params.slug</h1>

D <h1>Blog Post: hello-world</h1>

💡 Hint

Dynamic route parameters are passed as params to the component.

The [slug] in the filename captures the URL part after /blog/ and passes it as params.slug. So navigating to /blog/hello-world sets params.slug to hello-world.

📝 Syntax

intermediate

Which code correctly accesses a dynamic parameter in a SvelteKit page?

Choose the option that correctly accesses the dynamic route parameter id in a file named src/routes/user/[id].svelte.

A <script>let userId = $page.params.id;</script>

B <script>export let params; let userId = params.id;</script>

C <script>import { page } from '$app/stores'; let userId = page.params.id;</script>

D <script>export let id; let userId = id;</script>

💡 Hint

Dynamic parameters are passed as params props to the page component.

In SvelteKit, dynamic route parameters are passed as params to the page component as props. So you must declare export let params; and then access params.id.

❓ state_output

advanced

What is the value of currentId after navigation?

Consider this SvelteKit component in src/routes/product/[id].svelte:

<script>
  export let params;
  let currentId = params.id;
</script>

<h2>Product ID: {currentId}</h2>

If the user navigates from /product/123 to /product/456 without a full page reload, what will be the value of currentId?

A 123

B 456

C undefined

D An error is thrown

💡 Hint

Think about how export let params works with client-side navigation.

The params prop is set only when the component is created. Navigating client-side does not recreate the component, so currentId remains the initial value 123. To update on navigation, you must react to params changes.

🔧 Debug

advanced

Why does this dynamic route component show an empty slug?

Given this SvelteKit component src/routes/[slug].svelte:

<script>
  export let params;
</script>

<p>Slug: {params.slug}</p>

When navigating to /hello, the page shows Slug: (empty). What is the most likely cause?

A The <code>params</code> prop is missing the <code>export let</code> declaration, so it is undefined

B The <code>params</code> prop is not passed automatically; you must import it from <code>$page</code> store

C The route parameter name in the filename does not match the accessed property; it should be <code>params.hello</code>

D The route file is named incorrectly; it should be <code>[slug].js</code> instead of <code>[slug].svelte</code>

💡 Hint

Check how props are declared in Svelte components.

In SvelteKit, dynamic route parameters are passed as props named params. To access them, you must declare export let params;. Without this, params is undefined, so params.slug is empty.

🧠 Conceptual

expert

How does SvelteKit handle multiple dynamic parameters in nested routes?

Consider these two route files in SvelteKit:

• src/routes/shop/[category]/[item].svelte
• src/routes/shop/[category]/index.svelte

If a user navigates to /shop/electronics/phone, which parameters are available in [item].svelte and what are their values?

A Only <code>params.item</code> is available with value <code>phone</code>; <code>params.category</code> is undefined

B Only <code>params.category</code> is available with value <code>electronics</code>; <code>params.item</code> is undefined

C Both <code>params.category</code> and <code>params.item</code> are available with values <code>electronics</code> and <code>phone</code> respectively

D No <code>params</code> are available because nested dynamic routes do not pass parameters

💡 Hint

Think about how nested dynamic segments combine their parameters.

SvelteKit merges all dynamic parameters from the full route path. So in /shop/electronics/phone, params.category is electronics and params.item is phone in the [item].svelte component.