Dynamic route parameters in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dynamic route parameter in SvelteKit?

A dynamic route parameter is a part of the URL path that can change and is captured as a variable in the route. It allows pages to handle different data based on the URL, like showing a user profile by ID.

beginner

How do you define a dynamic route parameter in a SvelteKit file path?

You define it by wrapping the parameter name in square brackets in the file name. For example, src/routes/user/[id].svelte captures the id from the URL.

intermediate

How do you access a dynamic route parameter inside a SvelteKit page component?

You use the page store from $app/stores or the params object in load functions to get the parameter value, like params.id.

beginner

What happens if you visit a URL that does not match any dynamic route parameter pattern?

SvelteKit will show a 404 page because no route matches the URL pattern. Dynamic routes only match URLs that fit their parameter structure.

intermediate

Can you have multiple dynamic parameters in one route? How?

Yes, you can have multiple parameters by adding multiple bracketed names in the file path, like src/routes/blog/[category]/[post].svelte. Each parameter is accessible separately.

How do you name a file to capture a dynamic parameter called 'userId' in SvelteKit?

A {userId}.svelte

B [userId].svelte

C userId.svelte

D (userId).svelte

Dynamic parameters are wrapped in square brackets in the file name, like [userId].svelte.

Where can you access the dynamic route parameters inside a SvelteKit page?

A In the <code>params</code> object of the <code>load</code> function

B In the <code>props</code> of the component

C In the <code>window.location</code> object

D In the <code>document</code> object

Dynamic parameters are accessed via the params object passed to the load function.

What URL would match the route file src/routes/product/[id].svelte?

A /product

B /product?id=123

C /product/123

D /product/123/details

The URL /product/123 matches the dynamic parameter id in the route.

Can a dynamic route parameter contain slashes '/' in its value?

A Yes, but only numbers

B Yes, it matches the whole rest of the URL

C Only if you use special syntax

D No, it matches only one segment between slashes

Dynamic parameters match exactly one segment between slashes, not multiple segments.

How do you define a route with two dynamic parameters 'category' and 'post'?

A src/routes/[category]/[post].svelte

B src/routes/category/post.svelte

C src/routes/[category-post].svelte

D src/routes/(category)/(post).svelte

Each dynamic parameter is wrapped in its own square brackets in the folder structure.

Explain how dynamic route parameters work in SvelteKit and how you use them in your code.

Think about how URLs change and how your app knows which data to show.

Describe how you would create a blog post page that uses dynamic route parameters for category and post ID.

Imagine URLs like /blog/tech/123 and how your files match that.