Complete Guide to Astro Routing

By Jane Smith • 2024-01-20 • 8 min read

Dynamic Route Details

File: /blog/[slug].astro (dynamic route)
URL Pattern: /blog/[any-slug-here]
Current slug: "astro-routing-guide"
Note: This route handles all /blog/* URLs except /blog/create (static route has priority)
#astro #routing #tutorial

Learn everything about Astro's powerful file-based routing system.

Other Blog Posts

My First Blog Post

John Doe • 3 min read

Dynamic vs Static Routes in Astro

Alex Johnson • 6 min read

10 Web Performance Tips for 2024

Sarah Wilson • 12 min read

Route Priority in Action

/blog/create Static Route

Goes to create.astro (blog creation form)

/blog/astro-routing-guide Dynamic Route

Goes to [slug].astro (this page)

Dynamic Route Implementation

---
// File: /blog/[slug].astro
export const prerender = false; // SSR for dynamic content

const { slug } = Astro.params;

// In real app: query database/CMS
const post = await getPostBySlug(slug);

if (!post) {
  return Astro.redirect('/404');
}
---

<Layout title={post.title}>
  <h1>{post.title}</h1>
  <p>Slug: {slug}</p>
  <div>{post.content}</div>
</Layout>

Test Different Slugs

Try these URLs to see how the dynamic route handles different slugs:

/blog/test-post /blog/another-example /blog/dynamic-routing-demo /blog/any-slug-works
Create New Post Back to Router Examples