Why file-based routing simplifies navigation in Astro - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new page in Astro by adding a file named {{BLANK_1}}.

Astro

Create a file called [1] inside the src/pages directory to add a new page.

Drag options to blanks, or click blank then click option'

Amain.js

Bindex.html

Cabout.astro

Dstyle.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using .html or .js files instead of .astro for pages.

In Astro, pages are created by adding .astro files inside the src/pages folder. Naming the file about.astro creates an About page automatically.

2fill in blank

medium

Complete the code to link to the About page using the correct path in Astro.

Astro

<a href="[1]">About</a>

Drag options to blanks, or click blank then click option'

Aabout.astro

B/about

C/src/pages/about

Dabout.html

Attempts:

3 left

💡 Hint

Common Mistakes

Linking to the file name with extension instead of the URL path.

File-based routing in Astro maps about.astro to the URL path /about. So the link should use /about.

3fill in blank

hard

Fix the error in the code by choosing the correct file name for the homepage in Astro.

Astro

The homepage file should be named [1] inside src/pages.

Drag options to blanks, or click blank then click option'

Aindex.astro

Bmain.astro

Chome.astro

Dstart.astro

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the homepage file anything other than index.astro.

Astro uses index.astro as the default homepage file inside src/pages. Other names won't work as the root page.

4fill in blank

hard

Fill both blanks to create a nested route for a blog post in Astro.

Astro

Create a file at src/pages/blog/[1]/[2].astro to make a nested route.

Drag options to blanks, or click blank then click option'

A[slug]

Bpost

Cindex

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Using static names instead of dynamic route syntax with brackets.

In Astro, dynamic routes use square brackets. To create a nested blog post route, use a folder named post and a dynamic file [slug].astro.

5fill in blank

hard

Fill all three blanks to create a dynamic nested route for a user profile in Astro.

Astro

Place the file at src/pages/[1]/[2]/[3].astro to define the route.

Drag options to blanks, or click blank then click option'

Ausers

B[userId]

Cprofile

Daccount

Attempts:

3 left

💡 Hint

Common Mistakes

Not using dynamic folder names for parameters.

This structure creates a nested route like /users/:userId/profile. The folder users, dynamic folder [userId], and file profile.astro define the path.

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