Creating Pages with Astro’s File-Based Routing
Explore Astro’s file-based routing system to create static pages by organizing files within the src/pages folder. Learn how route URLs correspond to file names, how static and dynamic routes work, and how to navigate between pages using standard HTML anchors without SPA behaviors. This lesson helps you build well-structured, navigable web pages using Astro.
We'll cover the following...
Astro uses file-based routing to generate URLs. This means that URLs will be generated based on the name of the file. All routes must be created inside the src/pages folder. To get a better understanding of how routes are generated, take a look at the table below:
File | Generated Route |
| domain.com/ |
| domain.com/contact |
| domain.com/contact |
| domain.com/contact/john |
As we can see, each file inside the src/pages folder represents a specific route in our application:
src/pages/index.astro: It generates the root URL (domain.com/). This file represents the landing page of our application.src/pages/contact.astro: It generates a/contactURL. ...