Routing Basics in Astro.js: Static and Dynamic Routes

Ever wondered how Astro.js handles routing so seamlessly? Let’s dive into the world of static and dynamic routes in Astro.js - a topic that might seem complex at first but becomes crystal clear once you understand the basics.

Understanding File-Based Routing

At its core, Astro.js follows a file-based routing system, which means your file structure directly maps to your website’s URLs. It’s like organizing your room - every item has its designated place, and you know exactly where to find it.

Think of your src/pages directory as the blueprint of your website. When you create a file here, Astro automatically generates a corresponding route. For example, src/pages/about.astro becomes /about, and src/pages/blog.astro transforms into /blog. Simple, right?

Static Routes: The Foundation

Static routes are like the reliable friends in your life - they’re consistent and predictable. These are your basic pages with fixed URLs that don’t change based on user input or data.

Here’s how you might structure your static routes:

src/pages/
  ├── index.astro    // homepage (/)
  ├── about.astro    // about page (/about)
  └── contact.astro  // contact page (/contact)

Dynamic Routes: The Game Changer

Now, let’s talk about dynamic routes - the flexible powerhouse of Astro.js routing. They’re perfect when you need URLs that adapt to your content, like blog posts or product pages.

To create dynamic routes, use square brackets in your file names to define parameters. For instance, src/pages/blog/[slug].astro will match URLs like /blog/my-first-post or /blog/astro-is-awesome.

Here’s a practical example:

---
export async function getStaticPaths() {
  const posts = await getPosts();
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
---
<h1>{post.title}</h1>

Rest Parameters: The Swiss Army Knife

For those situations where you need even more flexibility, Astro.js offers rest parameters using [...path]. This is particularly useful for catch-all routes or nested dynamic content.

Remember, while this power is amazing, use it wisely to maintain a clean and intuitive URL structure for your users.