Astro JS - Dynamic Routing

Quiz

What is Dynamic Routing?

Dynamic Routing is a advanced routing mechanism in which, the URL of web application is generated using dynamic parameters defined in the filename. The dynamic parameters will act as variables for dynamic routing pages. For example, 'src/pages/authors/[author].astro' generates a bio page for every author on your blog. The [author] becomes a parameter, which user choose to visit when accessing the webpage.

Modes of Dynamic Routing

There are two modes of dynamic routing in Astro:

Static Mode
Server Mode

Static Mode

In Static Mode, all the dynamic routes must be pre-determined at the build time itself. The getStaticPaths() function is used to generate the list of dynamic routes. This function is called by the Astro server before the build process starts.

Example 1 - Single Parameter

In the code below, we define a dynamic route for a car showcase page where different car models can be displayed using a single [car] parameter in the URL.

<!-- File: src/pages/cars/[car].astro -->

---
    export function getStaticPaths() {
    return [
        {params: {car: 'ferrari'}},
        {params: {car: 'lambo'}},
        {params: {car: 'bugatti'}},
    ];
    }

    const { car } = Astro.params;
---
<div>Your car is {car}!</div>

Output

The output is shown below GIF.

Example 2 - Multiple Parameters

We can also define a dynamic route using multiple parameters. In the code below, we define a dynamic route for a blog post page where the blog post can be displayed using the [year], [month] and [slug] parameters in the URL.

<!-- File: src/pages/blog/[year]-[month]-[slug]/info.astro -->

---
    export function getStaticPaths() {
    return [
        {params: {year: '2021', month: '01', slug: 'newYear'}},
        {params: {year: '2021', month: '02', slug: 'valentine'}},
        {params: {year: '2021', month: '03', slug: 'spring'}},
    ];
    }

    const { year, month, slug } = Astro.params;
---
<div>Your blog post is from {month}/{year} and titled as {slug}!</div>

Output

The output is shown below GIF. The above code generated dynamic routes for '/2021-01-newYear/info', '/2021-02-valentine/info' and '/2021-03-spring/info'.

Similarly, the parameters can be included in separate parts of the path. For example, the file src/pages/[year]/[month]/[slug]/info.astro with the same getStaticPaths() above will generate the routes /2021/01/newYear/info and /2021/02/valentine/info.

Example 3 - Multiple Level Dynamic Pages

We can also create slugs with different levels of dynamic pages using the [...slug] parameter. See the code below.

---
export async function getStaticPaths() {
    const pages = [
    {
        slug: undefined,
        title: "Astro Store",
        text: "Welcome to the Astro store!",
    },
    {
        slug: "products",
        title: "Astro products",
        text: "We have lots of products for you",
    },
    {
        slug: "products/astro-handbook",
        title: "The ultimate Astro handbook",
        text: "If you want to learn Astro, you must read this book.",
    },
    ];
    return pages.map(({ slug, title, text }) => {
    return {
        params: { slug },
        props: { title, text },
    };
    });
}

const { title, text } = Astro.props;
---
<html>
    <head>
    <title>{title}</title>
    </head>
    <body>
        <h1>{title}</h1>
        <p>{text}</p>
    </body>
</html>

Output

In the output, you can see that the [...slug] parameter is replaced with the defined routes

Server Mode

In server mode dynamic routing, the routes are not generated at build time. It will be generated at request time and severed to any matching routes. Since the pages are not static, the 'getStaticPaths()' function is not required. Learn how to setup a server page in astro here.

In the code below, we defined a resource page for a resource with the [resource] parameter and the [id] parameter in the URL. User can choose any value for the [resource] and [id] parameters to access the page.

<!-- File: src/pages/resources/[resource]/[id].astro -->

---
    const { resource, id } = Astro.params;
    export const prerender = false
---
<h1>{resource}: {id}</h1>

Output

In the output, you can see that the generated page is matching with any of the routes defined by user.

Print Page