Dynamic Routes in Astro
From the Astro cheat sheet · Routing & Pages · verified Jul 2026
Dynamic Routes
astro
---
// pages/posts/[slug].astro
export async function getStaticPaths() {
const posts = await fetch('https://api.example.com/posts')
.then(res => res.json());
return posts.map(post => ({
params: { slug: post.slug },
props: { post }
}));
}
const { post } = Astro.props;
const { slug } = Astro.params;
---
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>✅ getStaticPaths() generates all routes at build time
💡 Return array of { params, props } objects
🔍 Access params via Astro.params, props via Astro.props
⚡ Use [...rest] for catch-all routes of any depth
dynamic-routesgetStaticPathsparams