Why file-based routing simplifies navigation in Astro - See It in Action

Why file-based routing simplifies navigation

📖 Scenario: You are building a simple website with multiple pages using Astro. You want to create navigation links that let users move between pages easily.

🎯 Goal: Build a small Astro project that uses file-based routing to create pages and navigation links automatically based on the file structure.

📋 What You'll Learn

Create Astro page files in the src/pages folder

Use file names to define routes automatically

Add navigation links that match the file-based routes

Show how adding a new file creates a new route without extra code

💡 Why This Matters

🌍 Real World

Many modern web frameworks use file-based routing to simplify building websites and apps. This lets developers focus on content instead of routing code.

💼 Career

Understanding file-based routing is essential for working with frameworks like Astro, Next.js, Nuxt, and others. It speeds up development and reduces bugs.

1

Create initial pages using file-based routing

Create two Astro page files: src/pages/index.astro and src/pages/about.astro. In index.astro, write a heading <h1>Home Page</h1>. In about.astro, write a heading <h1>About Page</h1>.

Astro

# Create two files: src/pages/index.astro and src/pages/about.astro
# Add Home Page in index.astro
# Add About Page in about.astro

Hint

Astro automatically creates routes from files in src/pages. Just create the files with the correct names and add headings inside.

2

Add navigation links to the Home page

In src/pages/index.astro, add a navigation section with two links: one to the home page using <a href='/'>Home</a> and one to the about page using <a href='/about'>About</a>.

Astro

---
---
Home Page



---
---
About Page

Hint

Use the <nav> element to group links. The href paths match the file names in src/pages.

3

Add navigation links to the About page

In src/pages/about.astro, add the same navigation section with links to / and /about so users can navigate back and forth.

Astro

---
---
About Page

Hint

Repeat the navigation links in the About page so users can easily switch pages.

4

Add a new page to show automatic routing

Create a new file src/pages/contact.astro with a heading <h1>Contact Page</h1>. Then add a link to /contact in the navigation sections of both index.astro and about.astro.

Astro

---
---
Contact Page

Contact links in index.astro and about.astro navigation -->

Hint

Adding a new file automatically creates a new route. Just add links to it in your navigation.

Practice

1. What is the main benefit of file-based routing in Astro's src/pages folder?

easy

A. Routes are created automatically from file names, so no extra routing code is needed.

B. You must write manual route definitions for each page.

C. It requires complex configuration files to work properly.

D. It only works for static websites, not dynamic ones.

Solution

1. Step 1: Understand file-based routing concept

   In Astro, files inside src/pages automatically become routes based on their file names.

2. Step 2: Compare with manual routing

   This means you don't need to write extra code to define routes, simplifying navigation setup.

3. Final Answer:

   Routes are created automatically from file names, so no extra routing code is needed. -> Option A

4. Quick Check:

   File names = Routes automatically [OK]

Hint: File names in pages folder become routes automatically [OK]

Common Mistakes:

• Thinking manual route code is always required
• Believing configuration files are needed for routing
• Assuming file-based routing only works for static sites

2. Which of the following file paths correctly creates a route for /about/team in Astro?

easy

A. src/pages/team/about.astro

B. src/pages/about/team/index.astro

C. src/pages/about_team.astro

D. src/pages/about-team.astro

Solution

1. Step 1: Understand folder structure for nested routes

   To create /about/team, you need a folder about with a file inside it for team.

2. Step 2: Identify correct file path

   src/pages/about/team/index.astro creates the route /about/team because index.astro inside team folder maps to that path.

3. Final Answer:

   src/pages/about/team/index.astro -> Option B

4. Quick Check:

   Nested folders + index file = nested route [OK]

Hint: Nested folders with index.astro create nested routes [OK]

Common Mistakes:

• Using dashes instead of folders for nested routes
• Placing files directly without folders for nested paths
• Confusing underscores with dashes in file names

3. Given these files in src/pages:
index.astro, blog/index.astro, blog/post.astro
What routes will be available on the website?

medium

A. /, /blog, /post

B. /index, /blog/index, /blog/post

C. /, /blog, /blog/post

D. /index, /blog, /post

Solution

1. Step 1: Map files to routes

   index.astro maps to /, blog/index.astro maps to /blog, and blog/post.astro maps to /blog/post.

2. Step 2: Check for correct route paths

   Routes reflect folder structure and file names without index in URL.

3. Final Answer:

   /, /blog, /blog/post -> Option C

4. Quick Check:

   File names + folders = routes [OK]

Hint: index.astro means root of folder route [OK]

Common Mistakes:

• Including 'index' in URL paths
• Assuming files outside folders create nested routes
• Mixing up file names with route paths

4. You want to create a route /contact but your file is named src/pages/contact.astrox. What is the problem?

medium

A. The file extension is incorrect, so Astro won't recognize the route.

B. The file name should be contact/index.astro instead.

C. Astro requires a folder named contact with any file inside.

D. The route will work but only in development mode.

Solution

1. Step 1: Check file extension requirement

   Astro requires page files to have .astro extension to create routes.

2. Step 2: Identify impact of wrong extension

   contact.astrox is not recognized, so no route /contact is created.

3. Final Answer:

   The file extension is incorrect, so Astro won't recognize the route. -> Option A

4. Quick Check:

   Correct file extension = route created [OK]

Hint: Check file extensions carefully for routing [OK]

Common Mistakes:

• Assuming any file extension works
• Thinking folder structure fixes wrong extensions
• Believing routes work without proper file names

5. You want to add a dynamic user profile route like /user/123 using file-based routing. Which file path correctly creates this dynamic route in Astro?

hard

A. src/pages/user/:id.astro

B. src/pages/user/id.astro

C. src/pages/user/_id.astro

D. src/pages/user/[id].astro

Solution

1. Step 1: Understand Astro dynamic route syntax

   Astro uses square brackets [param] in file names to define dynamic route segments.

2. Step 2: Identify correct dynamic route file

   src/pages/user/[id].astro creates a route matching /user/anything where id is dynamic.

3. Final Answer:

   src/pages/user/[id].astro -> Option D

4. Quick Check:

   Dynamic routes use [param] syntax [OK]

Hint: Use [param] in file name for dynamic routes [OK]

Common Mistakes:

• Using colons or underscores instead of brackets
• Naming files literally as 'id.astro' for dynamic routes
• Confusing dynamic route syntax with other frameworks