Islands First

File-based routing

Lesson 1 of 5

What you'll learn

Map a file under src/pages to the URL it serves
Recognize index files as the route for their folder
Capture dynamic segments from [param] filenames

In Astro, the filesystem is the router. Every .astro (or .md) file under src/pages becomes a page, and its path on disk is its path in the URL. There is no central route table to keep in sync — you move a file, you move a route.

src/pages/index.astro          ->  /
src/pages/about.astro          ->  /about
src/pages/blog/index.astro     ->  /blog
src/pages/blog/hello.astro     ->  /blog/hello

Two rules do most of the work: the extension is dropped, and a file named index stands in for its folder. So blog/index.astro answers /blog, not /blog/index.

Dynamic segments come from the filename

A filename wrapped in square brackets is a dynamic route. The bracketed word becomes a parameter you can read at build time.

src/pages/blog/[slug].astro    ->  /blog/:slug
src/pages/docs/[...path].astro ->  /docs/* (catch-all)

A request to /blog/first-post matches [slug].astro with slug = "first-post". The rest-style [...path] catches any depth below it.

Static vs dynamic params

For static builds, a dynamic page must export getStaticPaths() to tell Astro which param values to pre-render. The filename defines the shape; getStaticPaths defines the values.

Routing is really just a transform: a file path in, a URL pattern and captured params out. The challenge models exactly that resolver.

Resolve a file path to a route

Run it. The resolver strips the pages prefix and extension, treats index as the folder root, and turns [param] segments into captured params.

Loading editor…

Next: what actually lives inside an .astro file.

Next .astro components & props