Route groups in Svelte - Step-by-Step Execution

Concept Flow - Route groups

Start: User visits URL

↓

Router checks route groups

↓

Match route group prefix?

No→Check other routes

Yes↓

Apply group layout or settings

↓

Render child route component

↓

Display page with group context

When a user visits a URL, the router checks if it matches a route group prefix. If yes, it applies the group's layout or settings, then renders the child route inside that group.

Execution Sample

Svelte

// Folder structure example
src/routes/(admin)/dashboard/+page.svelte
src/routes/(admin)/settings/+page.svelte

// (admin) is a route group folder
// Routes inside share layout or settings

This code shows a route group named (admin) that groups dashboard and settings routes under a shared layout or settings.

Execution Table

Step	URL Visited	Route Group Checked	Group Match?	Action Taken	Rendered Component
1	/dashboard	(admin)	Yes	Apply admin group layout	dashboard/+page.svelte
2	/settings	(admin)	Yes	Apply admin group layout	settings/+page.svelte
3	/profile	(admin)	No	Check other routes	profile/+page.svelte
4	/admin	(admin)	Yes	No direct child route, 404 or redirect	None

💡 Routing stops when a matching route is found or no routes match.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
currentURL	''	"/dashboard"	"/settings"	"/profile"	"/admin"
groupMatched	false	true	true	false	true
layoutApplied	none	admin layout	admin layout	none	admin layout
componentRendered	none	dashboard/+page.svelte	settings/+page.svelte	profile/+page.svelte	none

Key Moments - 2 Insights

Why does /profile not use the (admin) group layout?

Because /profile URL does not match the (admin) group prefix, so the router skips that group and looks for other routes (see execution_table row 3).

What happens if a URL matches a group but no child route exists?

The router finds no matching child route inside the group, so it shows a 404 or redirect (see execution_table row 4).

Visual Quiz - 3 Questions

Look at the execution table, what layout is applied when visiting /settings?

A no layout

B admin layout

C profile layout

D default layout

💡 Hint

Check the 'layoutApplied' column after Step 2 in variable_tracker.

At which step does the route group NOT match the URL?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Group Match?' column in execution_table for Step 3.

If we add a route admin/+page.svelte inside (admin), what happens at Step 4?

A 404 error still shown

B No layout applied, +page.svelte rendered

C admin layout applied and +page.svelte rendered

D Router crashes

💡 Hint

Route groups apply layout to all child routes; adding admin/+page.svelte matches /admin URL.

Concept Snapshot

Route groups in Svelte organize routes under a shared folder named with parentheses, e.g., (admin).
Routes inside a group share layouts or settings automatically.
When a URL matches a group's prefix, the group layout applies before rendering the child route.
If no child route matches, a 404 or redirect occurs.
This helps keep related pages consistent and organized.

Full Transcript

Route groups in Svelte let you group related routes inside folders named with parentheses, like (admin). When a user visits a URL, the router checks if it matches a route group prefix. If it does, the router applies the group's layout or settings, then renders the child route inside that group. For example, visiting /dashboard matches the (admin) group, so the admin layout is applied and dashboard/+page.svelte is shown. If a URL does not match the group prefix, like /profile, the router skips that group and looks for other routes. If a URL matches a group but no child route exists, a 404 or redirect happens. This system helps keep related pages organized and consistent in style.

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