Route Params

`Astro.params` holds the matched dynamic segments. Strings, always strings.

3 min read Level 1/5 #astro#params#dynamic-routes

What you'll learn

Read params in a dynamic page
Convert to numbers / other types
Handle missing segments in rest routes

Astro.params is the object holding every captured segment for the current page. Keys come from the file name’s [brackets].

A Single Param

---
// src/pages/users/[id].astro
const { id } = Astro.params;
const userId = Number(id);   // params are always strings
---

<h1>User #{userId}</h1>

Multiple Params

---
// src/pages/users/[userId]/posts/[postId].astro
const { userId, postId } = Astro.params;
---

<h2>User {userId}, Post {postId}</h2>

Rest Routes

For src/pages/docs/[...path].astro:

/docs/intro → params.path === "intro"
/docs/advanced/hooks → params.path === "advanced/hooks"
/docs → params.path === undefined

---
const { path = "index" } = Astro.params;
---
<p>You're at: {path}</p>

Combined With Props

If you returned props from getStaticPaths, prefer those over re-fetching by id:

---
const { post } = Astro.props;       // pre-loaded
// const { slug } = Astro.params;   // available, but you have the post already
---

<h1>{post.title}</h1>

Up Next

Query strings — ?q=astro&page=2.

Query Strings →