Route groups in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route group folder named __api__ in SvelteKit.

Svelte

src/routes/[1]/users/+page.svelte

Drag options to blanks, or click blank then click option'

A(api)

B[api]

C<api>

D{api}

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets or curly braces instead of parentheses.

Naming the folder without any special characters.

In SvelteKit, route groups are created by wrapping the folder name in parentheses, like (api). This groups routes without affecting the URL path.

2fill in blank

medium

Complete the code to import a component from a route group folder named (admin).

Svelte

import AdminPanel from '$routes/[1]/dashboard/+page.svelte';

Drag options to blanks, or click blank then click option'

A(admin)

Badmin

C[admin]

D{admin}

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the parentheses in the import path.

Using square brackets or curly braces instead of parentheses.

When importing from a route group folder, include the parentheses in the path to match the folder name exactly.

3fill in blank

hard

Fix the error in the route group folder name to correctly group routes without changing the URL.

Svelte

src/routes/[1]/profile/+page.svelte

Drag options to blanks, or click blank then click option'

Aprofile-group

B[profile-group]

C(profile-group)

D{profile-group}

Attempts:

3 left

💡 Hint

Common Mistakes

Using dashes without parentheses which changes the URL.

Using square brackets or curly braces instead of parentheses.

Route groups require parentheses around the folder name to group routes without affecting the URL.

4fill in blank

hard

Fill both blanks to create a route group folder and a nested route inside it.

Svelte

src/routes/[1]/[2]/+page.svelte

Drag options to blanks, or click blank then click option'

A(dashboard)

Bsettings

Cprofile

D[settings]

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets for the nested route folder.

Not wrapping the group folder in parentheses.

The folder (dashboard) is a route group, and settings is a nested route inside it.

5fill in blank

hard

Fill all three blanks to create a route group, a nested folder, and a page component inside it.

Svelte

src/routes/[1]/[2]/[3]/+page.svelte

Drag options to blanks, or click blank then click option'

A(user)

Bprofile

Cedit

D[edit]

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets for the last folder.

Not wrapping the group folder in parentheses.

The route group (user) contains a nested folder profile, which itself contains the edit page.