Route groups in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a route group affect URL paths in SvelteKit?

Consider a SvelteKit app with a route group folder named (admin) containing a page dashboard.svelte. What URL path will render this page?

Svelte

src/routes/(admin)/dashboard.svelte

A /dashboard

B /admin/dashboard

C /(admin)/dashboard

D /dashboard/(admin)

💡 Hint

Route groups in parentheses do not add to the URL path.

Folders named with parentheses like (admin) group routes without adding to the URL path. So dashboard.svelte inside (admin) is accessible at /dashboard.

📝 Syntax

intermediate

Identify the invalid route group folder name

Which folder name is NOT valid for a route group in SvelteKit?

A [group]

B (user-settings)

C (profile)

D (dashboard)

💡 Hint

Route groups must be wrapped in parentheses, not square brackets.

Route groups use parentheses like (group). Square brackets [group] are used for dynamic parameters, not groups.

❓ state_output

advanced

What is the rendered output path for nested route groups?

Given this folder structure in SvelteKit:

src/routes/(app)/(dashboard)/stats.svelte

What URL path will render stats.svelte?

A /stats/(app)/(dashboard)

B /app/dashboard/stats

C /(app)/(dashboard)/stats

D /stats

💡 Hint

Route groups do not add segments to the URL path, even when nested.

Both (app) and (dashboard) are route groups and do not add to the URL. So stats.svelte is accessible at /stats.

🔧 Debug

advanced

Why does this route group cause a 404 error?

In a SvelteKit app, a developer creates a folder named (admin-panel) with a page index.svelte. The URL /admin-panel returns 404. Why?

Svelte

src/routes/(admin-panel)/+page.svelte

A The file must be named 'admin-panel.svelte' to match the URL.

B Route groups do not add to the URL, so '/admin-panel' does not match any route.

C The folder name must not contain a hyphen inside parentheses.

D Route groups require a +page.svelte file, not index.svelte.

💡 Hint

Think about how route groups affect URL paths.

Route groups are invisible in the URL. So the URL '/admin-panel' looks for a folder named 'admin-panel' without parentheses. Since it doesn't exist, 404 occurs.

🧠 Conceptual

expert

What is the main purpose of route groups in SvelteKit?

Why would a developer use route groups (folders with parentheses) in a SvelteKit project?

A To automatically generate nested layouts for each group.

B To create dynamic URL segments for parameters.

C To organize routes without changing the URL structure.

D To enable server-side rendering only for grouped routes.

💡 Hint

Consider how route groups affect URLs and project structure.

Route groups help organize files and layouts without adding extra parts to the URL path. They keep URLs clean while allowing folder grouping.