File-based routing in Svelte - Mini Project: Build & Apply

File-based Routing in Svelte

📖 Scenario: You are building a simple website with multiple pages using SvelteKit. You want to use file-based routing to create pages that users can visit by URL.

🎯 Goal: Create a SvelteKit project structure with file-based routing by adding page files in the src/routes folder. Build a homepage and an about page that users can navigate to by URL.

📋 What You'll Learn

Create a src/routes/+page.svelte file for the homepage

Create a src/routes/about/+page.svelte file for the about page

Add simple content in each page to identify it

Use file-based routing conventions of SvelteKit

💡 Why This Matters

🌍 Real World

File-based routing is used in modern web frameworks to simplify creating multiple pages without manual route configuration.

💼 Career

Understanding file-based routing is essential for building scalable web apps with frameworks like SvelteKit, Next.js, or Nuxt.js.

1

Create the homepage file

Create a file called src/routes/+page.svelte with a <h1> heading that says Home Page.

Svelte

Home Page -->

Hint

This file defines the homepage content. The filename +page.svelte inside src/routes makes it the root page.

2

Create the about page folder and file

Create a folder called about inside src/routes. Inside it, create a file called +page.svelte with a <h1> heading that says About Page.

Svelte

Home Page
About Page -->

Hint

Folders inside src/routes create URL paths. The file +page.svelte inside about folder becomes the /about page.

3

Add navigation links to homepage

In src/routes/+page.svelte, add a navigation link to the about page using an <a> tag with href="/about" and link text About below the <h1> heading.

Svelte

Home Page
About link below -->


About Page

Hint

Use a normal anchor tag with href set to /about to link to the about page.

4

Add navigation link back to homepage on about page

In src/routes/about/+page.svelte, add a navigation link back to the homepage using an <a> tag with href="/" and link text Home below the <h1> heading.

Svelte

Home Page
About


About Page
Home link below -->

Hint

Use an anchor tag with href / to link back to the homepage.