Dynamic routes with parameters in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Astro dynamic route component?

Consider an Astro page at src/pages/blog/[slug].astro that uses the dynamic parameter slug. What will this component render if the URL is /blog/hello-world?

Astro

---
const { slug } = Astro.params;
---
<html>
  <body>
    <h1>Blog Post: {slug}</h1>
  </body>
</html>

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

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

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

D <h1>Blog Post: undefined</h1>

💡 Hint

Remember that Astro.params contains the dynamic parts of the URL.

The dynamic parameter slug is extracted from the URL and used in the template. For /blog/hello-world, slug is hello-world.

📝 Syntax

intermediate

Which option correctly defines a dynamic route file for a user profile page?

You want to create a dynamic route in Astro to handle user profiles by username. Which filename is correct?

A src/pages/user/{username}.astro

B src/pages/user/_username.astro

C src/pages/user/[username].astro

D src/pages/user/:username.astro

💡 Hint

Astro uses square brackets to define dynamic route parameters.

Astro dynamic routes use square brackets around the parameter name in the filename, like [username].astro.

🔧 Debug

advanced

Why does this Astro dynamic route component fail to render the parameter?

Given this code in src/pages/product/[id].astro, why does the page show Product ID: undefined?

Astro

---
const id = Astro.params.id;
---
<html>
  <body>
    <h2>Product ID: {id}</h2>
  </body>
</html>

A Astro does not support dynamic routes with parameters.

B The parameter should be accessed as <code>Astro.param.id</code> (missing 's').

C Dynamic parameters must be destructured, so <code>const { id } = Astro.params;</code> is required.

D The URL does not include the dynamic segment, so <code>Astro.params.id</code> is undefined.

💡 Hint

Check the URL you are visiting and if it matches the dynamic route pattern.

If the URL does not include the dynamic segment (like /product), then Astro.params.id will be undefined, causing the output to show 'undefined'.

❓ state_output

advanced

What is the output when accessing nested dynamic route parameters in Astro?

Given a file src/pages/shop/[category]/[item].astro with this code:

---
const { category, item } = Astro.params;
---

  
    
Category: {category}
    
Item: {item}
  

What will be rendered when visiting /shop/electronics/laptop?

A <p>Category: [category]</p><p>Item: [item]</p>

B <p>Category: electronics</p><p>Item: laptop</p>

C <p>Category: undefined</p><p>Item: undefined</p>

D <p>Category: electronics</p><p>Item: [item]</p>

💡 Hint

Astro extracts all dynamic segments from the URL into Astro.params.

Both category and item are dynamic parameters and will be set from the URL segments.

🧠 Conceptual

expert

What happens if you create two dynamic route files with overlapping patterns in Astro?

You have these two files in src/pages:

• [user].astro
• [user]/[post].astro

What will happen when you visit /alice and /alice/123?

A <p><code>/alice</code> renders <code>[user].astro</code>, <code>/alice/123</code> renders <code>[user]/[post].astro</code>.</p>

B <p>Both URLs render <code>[user].astro</code> because it matches first.</p>

C <p>Both URLs render <code>[user]/[post].astro</code> because it is more specific.</p>

D <p>Astro throws a routing conflict error and fails to build.</p>

💡 Hint

Think about how nested dynamic routes match URLs in Astro.

Astro matches the URL to the most specific route file. /alice matches [user].astro, and /alice/123 matches the nested [user]/[post].astro.

Practice

1. What does a filename like [id].astro represent in Astro?

easy

A. A dynamic route that captures the id parameter from the URL

B. A static page named literally [id]

C. A component that cannot receive parameters

D. A special Astro configuration file

Solution

1. Step 1: Understand dynamic route syntax

   In Astro, square brackets in filenames like [id].astro define a dynamic route parameter named id.

2. Step 2: Recognize the purpose of the parameter

   This parameter captures part of the URL, allowing the page to change based on the URL segment.

3. Final Answer:

   A dynamic route that captures the id parameter from the URL -> Option A

4. Quick Check:

   Dynamic route = filename with [param] [OK]

Hint: Look for square brackets in filename for dynamic parameters [OK]

Common Mistakes:

• Thinking [id].astro is a static file
• Confusing parameter with component name
• Assuming parameters are optional by default

2. Which is the correct way to access a dynamic route parameter named slug inside an Astro component?

easy

A. Astro.query.slug

B. Astro.route.slug

C. Astro.params.slug

D. Astro.props.slug

Solution

1. Step 1: Recall Astro parameter access

   Astro provides dynamic route parameters inside the component via Astro.params.

2. Step 2: Use the parameter name as key

   To get the value of slug, use Astro.params.slug.

3. Final Answer:

   Astro.params.slug -> Option C

4. Quick Check:

   Access params with Astro.params.[name] [OK]

Hint: Use Astro.params to get dynamic route values [OK]

Common Mistakes:

• Using Astro.route or Astro.query instead of Astro.params
• Trying to access parameters via props
• Forgetting to use the exact parameter name

3. Given a file named src/pages/blog/[post].astro with this code snippet:

---
const postId = Astro.params.post;
---
Post ID: {postId}

What will be rendered when visiting /blog/42?

medium

A. Post ID: 42

B. Post ID: post

C. Post ID:

D. 404 Not Found

Solution

1. Step 1: Identify dynamic parameter value

   The URL /blog/42 matches the dynamic route [post].astro, so Astro.params.post is '42'.

2. Step 2: Render the parameter in the template

   The component outputs <h1>Post ID: {postId}</h1>, so it shows Post ID: 42.

3. Final Answer:

   <h1>Post ID: 42</h1> -> Option A

4. Quick Check:

   URL segment fills param = rendered value [OK]

Hint: URL segment replaces [param] and shows in Astro.params [OK]

Common Mistakes:

• Expecting literal 'post' instead of parameter value
• Assuming empty or missing parameter
• Confusing 404 with dynamic route handling

4. You have a dynamic route file named [user].astro but when visiting /john you get a runtime error: Cannot read property 'user' of undefined. What is the likely cause?

medium

A. Astro.params is only available in server components

B. You forgot to use Astro.params.user and accessed Astro.params directly

C. Dynamic routes cannot have parameters named 'user'

D. The filename should be {user}.astro instead of [user].astro

Solution

1. Step 1: Understand the error message

   The error says Cannot read property 'user' of undefined, meaning Astro.params is undefined or not accessed properly.

2. Step 2: Check parameter access syntax

   Accessing Astro.params.user is correct. If code tries to access Astro.params.user but Astro.params is undefined, it means Astro.params was not used or imported correctly.

3. Final Answer:

   You forgot to use Astro.params.user and accessed Astro.params directly -> Option B

4. Quick Check:

   Always use Astro.params.[param] to avoid undefined errors [OK]

Hint: Always access parameters via Astro.params.[name] [OK]

Common Mistakes:

• Using curly braces instead of square brackets in filename
• Assuming Astro.params is always defined globally
• Misnaming the parameter in code

5. You want to create a nested dynamic route in Astro to handle URLs like /products/electronics/123. Which file structure and parameter access is correct?

hard

A. Create src/pages/products/[category]/id.astro and access with Astro.params.id

B. Create src/pages/products/[category-id].astro and access with Astro.params['category-id']

C. Create src/pages/products/category/id.astro and access with Astro.params.category and Astro.params.id

D. Create src/pages/products/[category]/[id].astro and access with Astro.params.category and Astro.params.id

Solution

1. Step 1: Understand nested dynamic routes

   To match URLs like /products/electronics/123, you need nested folders with dynamic parameters: [category] and [id].

2. Step 2: Correct file structure and parameter access

   The correct structure is src/pages/products/[category]/[id].astro. Inside, access parameters as Astro.params.category and Astro.params.id.

3. Final Answer:

   Create src/pages/products/[category]/[id].astro and access with Astro.params.category and Astro.params.id -> Option D

4. Quick Check:

   Nested folders with [param] = nested params [OK]

Hint: Use nested folders with [param] for multi-level dynamic routes [OK]

Common Mistakes:

• Combining multiple params in one filename incorrectly
• Using static folder names instead of dynamic
• Accessing parameters that don't exist in the route