Dynamic Route Parameters: [id]
Capture URL segments as parameters using bracket notation in folder names.
Dynamic Route Parameters: [id] is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Bracket Folder Names
Use square brackets in folder names for dynamic segments.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugAccessing the Parameter
Inside the page, use the $page store from $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Load Function Access
Inside +page.js load, use params.slug directly.
export function load({ params }) { return { slug: params.slug }; }Multiple Params
Use multiple brackets for multi-segment paths.
src/routes/[lang]/[slug]/+page.svelteValidating Params
Return a 404 from load if the param is invalid.
if (!isValid(params.slug)) error(404, "Not found");Matchers
Add a src/params matcher to enforce a regex on a parameter.
src/routes/blog/[slug=alpha]/+page.svelteDefining a Matcher
Create src/params/alpha.js exporting a function.
export function match(value) { return /^[a-z]+$/.test(value); }SEO with Slugs
Slugs are usually URL-safe IDs. Generate slugs from titles for clean URLs.
Combining Static and Dynamic
Have static folders alongside dynamic ones; static wins on conflict.
Type Safety
SvelteKit generates types for params per route, accessible in the load function arg.
Pre-Rendering Dynamic Routes
Use entries in +page.js to enumerate values to prerender.
Quick Check
How are dynamic segments declared?
Recap
Use [param] folders for dynamic segments. Access via params in load or $page.params.
Frequently asked questions
Is the “Dynamic Route Parameters: [id]” lesson free?
Yes — the full text of “Dynamic Route Parameters: [id]” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dynamic Route Parameters: [id]”?
Capture URL segments as parameters using bracket notation in folder names. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dynamic Route Parameters: [id]” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- File-based Routing with +page.svelte
- Dynamic Route Parameters: [id]
- Optional and Rest Parameters
- Layout Files: +layout.svelte