Route groups in Svelte - Mini Project: Build & Apply

Organizing Routes with Route Groups in SvelteKit

📖 Scenario: You are building a small website with multiple pages. To keep your routes organized, you want to group related pages together using route groups in SvelteKit.

🎯 Goal: Create a SvelteKit project structure that uses route groups to organize pages under a common URL segment without affecting the URL path.

📋 What You'll Learn

Create a route group folder named (dashboard) inside the src/routes directory.

Inside the (dashboard) folder, create two pages: index.svelte and settings.svelte.

Add a configuration variable dashboardTitle in src/routes/(dashboard)/index.svelte with the value 'Dashboard Home'.

Use the route group so that the URL paths are / for the home page, /dashboard for the dashboard index, and /dashboard/settings for the settings page.

Add a navigation menu in src/routes/+layout.svelte linking to /, /dashboard, and /dashboard/settings.

💡 Why This Matters

🌍 Real World

Route groups help keep large SvelteKit projects organized by grouping related pages without affecting URLs, making maintenance easier.

💼 Career

Understanding route groups is important for building scalable web apps with SvelteKit, a popular modern framework.

1

Create the route group folder and pages

Create a folder named (dashboard) inside src/routes. Inside (dashboard), create two files: index.svelte and settings.svelte. In src/routes/+page.svelte, create a simple home page with the text Home Page.

Svelte

// Create folder (dashboard) inside src/routes
// Create index.svelte and settings.svelte inside (dashboard)
// Create src/routes/+page.svelte with Home Page text

Hint

Remember, route groups are folders with parentheses around their name, like (dashboard).

2

Add a configuration variable in the dashboard index page

In src/routes/(dashboard)/index.svelte, add a const variable named dashboardTitle and set it to the string 'Dashboard Home'. Display this variable inside an <h1> tag instead of the fixed text.

Svelte

Home Page



  // Your code here

{dashboardTitle}


Dashboard Settings

Hint

Use a <script> block to declare the variable and then use curly braces to display it.

3

Add navigation links in the layout

Create a file src/routes/+layout.svelte. Inside it, add a navigation menu with three links: <a href='/'>Home</a>, <a href='/dashboard'>Dashboard</a>, and <a href='/dashboard/settings'>Settings</a>. Use the <slot /> tag to render child pages.

Svelte

Hint

Use semantic HTML tags like <nav> and <main> for accessibility.

4

Verify route group URLs and final structure

Ensure that the route group (dashboard) does not appear in the URL path. The URLs should be / for the home page, /dashboard for the dashboard index, and /dashboard/settings for the settings page. Confirm the folder structure includes src/routes/+page.svelte, src/routes/+layout.svelte, and the (dashboard) folder with its pages.

Svelte

// Check your folder structure and URLs
// Your code here

Hint

Remember, route groups are folders with parentheses and do not appear in the URL path.

Practice

1. What is the main purpose of using route groups in a SvelteKit project?

easy

A. To change the URL path of routes automatically

B. To add styles to routes

C. To organize routes without changing the URL structure

D. To create API endpoints

Solution

1. Step 1: Understand route groups concept

   Route groups in SvelteKit are folders with parentheses that help organize routes.

2. Step 2: Identify effect on URL

   Route groups do not affect the URL path; they only organize files internally.

3. Final Answer:

   To organize routes without changing the URL structure -> Option C

4. Quick Check:

   Route groups = organize routes, no URL change [OK]

Hint: Remember: parentheses folders group routes but keep URLs same [OK]

Common Mistakes:

• Thinking route groups change URLs
• Confusing route groups with styling
• Assuming route groups create API endpoints

2. Which folder name correctly creates a route group in SvelteKit?

easy

A. (admin)

B. user_profile

C. blog(posts)

D. [settings]

Solution

1. Step 1: Identify route group syntax

   Route groups use parentheses around folder names, like (group).

2. Step 2: Check options

   Only (admin) uses parentheses correctly: (admin).

3. Final Answer:

   (admin) -> Option A

4. Quick Check:

   Parentheses folder = route group [OK]

Hint: Look for folder names wrapped in parentheses [OK]

Common Mistakes:

• Using square brackets instead of parentheses
• Not using any brackets
• Placing parentheses incorrectly

3. Given this folder structure in SvelteKit:

src/routes/(dashboard)/stats/+page.svelte
src/routes/(dashboard)/settings/+page.svelte

What will be the URL path to access the stats page?

medium

A. /(dashboard)/stats

B. /stats

C. /stats/dashboard

D. /dashboard/stats

Solution

1. Step 1: Understand route groups effect on URL

   Folders in parentheses do not appear in the URL path.

2. Step 2: Determine URL for stats page

   The stats folder is inside the group, so URL is just /stats.

3. Final Answer:

   /stats -> Option B

4. Quick Check:

   Route groups hide folder name in URL [OK]

Hint: Ignore parentheses folders when reading URLs [OK]

Common Mistakes:

• Including group folder name in URL
• Confusing parentheses with URL segments
• Assuming group name appears in URL

4. You created a folder named (admin) inside src/routes but your routes inside it are not working. What is a likely cause?

medium

A. You forgot to add a +page.svelte file inside the group folder

B. Parentheses are not allowed in folder names

C. Route groups must be named with square brackets

D. You need to restart the server after creating route groups

Solution

1. Step 1: Check route group folder requirements

   Route groups organize routes but need actual route files like +page.svelte inside.

2. Step 2: Identify missing file issue

   If no +page.svelte or route file exists, routes won't work.

3. Final Answer:

   You forgot to add a +page.svelte file inside the group folder -> Option A

4. Quick Check:

   Route groups need route files to work [OK]

Hint: Always add +page.svelte inside route groups [OK]

Common Mistakes:

• Thinking parentheses folders are invalid
• Using wrong bracket types
• Assuming server restart fixes missing files

5. You want to group routes for profile and settings under a common group without changing their URLs. Which folder structure achieves this correctly?

hard

A. src/routes/(user-profile-settings)/+page.svelte

B. src/routes/user/profile/+page.svelte and src/routes/user/settings/+page.svelte

C. src/routes/[user]/profile/+page.svelte and src/routes/[user]/settings/+page.svelte

D. src/routes/(user)/profile/+page.svelte and src/routes/(user)/settings/+page.svelte

Solution

1. Step 1: Understand grouping without URL change

   Route groups use parentheses folders to group routes without affecting URLs.

2. Step 2: Analyze folder structures

   src/routes/(user)/profile/+page.svelte and src/routes/(user)/settings/+page.svelte uses (user) folder to group profile and settings routes without adding /user to URLs.

3. Final Answer:

   src/routes/(user)/profile/+page.svelte and src/routes/(user)/settings/+page.svelte -> Option D

4. Quick Check:

   Parentheses folder groups routes, no URL change [OK]

Hint: Use parentheses folders to group routes invisibly [OK]

Common Mistakes:

• Using normal folders which add to URL
• Using square brackets which create dynamic routes
• Placing all routes in one file