Blog Post: Dynamic Routing Demo

By Demo Author • 2025-12-15 • 5 min read

Dynamic Route Details

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

This is a dynamically generated blog post for the slug "dynamic-routing-demo". In a real application, this would come from your CMS or database.

Demo Note

This blog post was dynamically generated because no specific content exists for the slug "dynamic-routing-demo". In a real application, you would typically:

  • Query your database or CMS for content matching this slug
  • Return a 404 page if no content is found
  • Or redirect to a similar/related post

Other Blog Posts

My First Blog Post

John Doe • 3 min read

Complete Guide to Astro Routing

Jane Smith • 8 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/dynamic-routing-demo 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