Dynamic route parameters in Svelte

Introduction

Dynamic route parameters let your app show different pages based on parts of the URL. This helps create pages that change depending on what the user clicks or types.

Showing a user profile page based on the user ID in the URL.

Displaying a blog post page using the post's unique slug from the URL.

Creating product pages where each product has its own URL with its ID.

Building a details page for items where the item ID is part of the URL.

Syntax

Svelte

/src/routes/[parameter]/+page.svelte

The square brackets [] around a name in the filename tell SvelteKit this part is dynamic.

The parameter name inside brackets becomes a variable you can use in your component.

Examples

This file handles URLs like /123 or /abc. The id is dynamic and changes based on the URL.

Svelte

/src/routes/[id]/+page.svelte

Inside the component, you get the dynamic part from params. Here, params.id shows the value from the URL.

Svelte

<script>
  export let params;
</script>

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

This route uses slug as the dynamic parameter, useful for blog post URLs like /blog/my-first-post.

Svelte

/src/routes/blog/[slug]/+page.svelte

Sample Program

This SvelteKit component shows a product page. The URL should look like /product/123, where 123 is the product ID. The component reads this ID from params.productId and displays it.

Svelte

<script>
  export let params;
</script>

<h1>Product Page</h1>
<p>Product ID: {params.productId}</p>

Important Notes

You must export params to access dynamic route values.

Dynamic routes can be nested, like /blog/[slug]/comments/+page.svelte.

Use descriptive parameter names to keep your code clear.

Summary

Dynamic route parameters let you create flexible pages that change based on the URL.

Use square brackets in filenames to define dynamic parts.

Access the dynamic value inside your component via the params object.