Route groups in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a route group in SvelteKit?

A route group in SvelteKit is a folder in the routes directory that groups related routes together without adding extra URL segments. It helps organize routes without changing the URL structure.

beginner

How do you create a route group in SvelteKit?

You create a route group by wrapping a folder name in parentheses, like (group-name). This folder can contain route files or other folders, but it won't add to the URL path.

intermediate

Why use route groups instead of normal folders in SvelteKit?

Route groups help keep your routes organized without changing the URL. Normal folders add to the URL path, but route groups do not, so they keep URLs clean while grouping related pages.

intermediate

Can route groups be nested inside each other in SvelteKit?

Yes, route groups can be nested. You can have folders like (group1)/(group2)/page.svelte to organize routes deeply without affecting the URL path.

beginner

Does a route group folder in SvelteKit affect the URL path?

No, route group folders do not affect the URL path. They are only for organizing files and routes internally, so the URL stays the same as if the group folder wasn't there.

How do you mark a folder as a route group in SvelteKit?

A Prefix the folder name with an underscore

B Add a special config file inside the folder

C Wrap the folder name in parentheses

D Use a dot before the folder name

In SvelteKit, route groups are created by wrapping the folder name in parentheses, like (group).

What happens to the URL path when you use a route group folder?

A The folder name appears in the URL

B The URL path becomes invalid

C The URL path is removed

D The URL path stays the same, no change

Route groups do not add to the URL path; they only organize routes internally.

Can you nest route groups inside other route groups in SvelteKit?

A No, nesting is not allowed

B Yes, nesting is allowed

C Only one level of nesting is allowed

D Nesting requires special configuration

SvelteKit allows nesting route groups by placing folders with parentheses inside each other.

Why might you use route groups in a SvelteKit project?

A To organize routes without changing URLs

B To disable routing for some pages

C To add extra URL segments

D To create API endpoints

Route groups help keep routes organized without affecting the URL structure.

Which of these folder names is a valid route group in SvelteKit?

A (admin)

B user-profile

C _settings

D .hidden

Only folders with names wrapped in parentheses, like (admin), are route groups.

Explain what a route group is in SvelteKit and why it is useful.

Think about how you keep your files tidy without changing how users see the website address.

Describe how nesting route groups works and what effect it has on URLs.

Imagine folders inside folders that don't show up in the website address.

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