Astro JS - Routing

Quiz

What is Routing?

Routing is a technique used in web applications to easily navigate between different directories of an application. The routing system is responsible for mapping URLs to the appropriate components of the application. In Astro JS, routing is handled by the Astro Router.

Routing in Astro

In Astro, the routing system is based on file structure of project, which means the structure of 'src/pages/' directory will define URLs of components in the application. For example, if you have a file 'src/pages/about.astro' in your project, then the URL for this component will be '/about'. Similarly,

src/pages/index.astro        -> localhost:4321/
src/pages/about.astro        -> localhost:4321/about
src/pages/about/index.astro  -> localhost:4321/about
src/pages/about/me.astro     -> localhost:4321/about/me
src/pages/posts/1.md         -> localhost:4321/posts/1

Types of Routing

Astro JS supports two types of routing:

Static Routing
Dynamic Routing

Static Routing

Static routing is a file based routing system, where each routing file have a fixed URL. The structure and naming of the file will determine the URL of the component and it will same for every user that visits the application.

In astro, the '.astro', '.md' and '.html' files inside 'src/pages/' directory will be treated as static routing files. This will automatically become page of your website. See the example below.

Example

First, we defined a home page in 'src/pages/index.astro' file.

<!-- File: src/pages/index.astro -->

<html lang="en">
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>Welcome to my website!</h1>
    </body>
</html>

Next, we defined a about page in 'src/pages/about.astro' file.

<!-- File: src/pages/about.astro -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>About Page</title>
    </head>
    <body>
        <h1>About Us</h1>
        <h2>Welcome to Our Story</h2>
        <p>This is a simple about page.</p>
    </body>
</html>

Output

The output is shown below GIF.

Dynamic Routing

In dynamic routing, the URL of the component is determined from the parameters defined in filename. The filename is a pattern that matches the URL of the component. To learn more about dynamic routing, see the Dynamic Routing chapter.

Example

This code define a simple dynamic routing page using getStaticPaths() function.

<!-- 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.

Navigating Between Pages

Astro JS also allows you to navigate between pages of your application. You can use standard HTML <a> tag to navigate between pages. There no any dedicated <Link> component supported in Astro JS as there in Next JS. See the example below.

<!-- File: src/pages/about.astro -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>About Page</title>
    </head>
    <body>
        <h1>About Us</h1>
        <h2>Welcome to Our Story</h2>
        <a href="/">Go back home</a>
    </body>
</html>

Output

The output is shown below GIF.

Print Page