File-based routing in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route for the home page in SvelteKit.

Svelte

<script>
  // This is the main page component
</script>

<h1>Welcome to the [1] page!</h1>

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

Amain

Broot

Cindex

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'home' or 'root' as the file name instead of 'index'.

Confusing the file name with the folder name.

In SvelteKit, the home page route is created by naming the file +page.svelte inside the routes folder. The term index is used to represent the root or home page.

2fill in blank

medium

Complete the code to define a dynamic route parameter in SvelteKit.

Svelte

<script>
  import { page } from '$app/stores';
</script>

<p>User ID: {$page.params.[1]</p>

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

AuserId

Bid

Cparam

Duid

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name than the file name.

Forgetting to export the params prop.

Dynamic route parameters in SvelteKit are defined by wrapping the parameter name in square brackets in the file name, like [id]. The parameter is accessed as $page.params.id.

3fill in blank

hard

Fix the error in the route file name to correctly create a nested route in SvelteKit.

Svelte

routes/[1]/+page.svelte

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

Aprofile/settings

B[profile]/settings

Cprofile/[settings]

Attempts:

3 left

💡 Hint

Common Mistakes

Putting slashes inside folder names.

Using square brackets incorrectly for static folder names.

To create a nested route, use folders for each level. The folder names should not contain slashes. The correct folder structure is profile/settings with a +page.svelte inside the settings folder.

4fill in blank

hard

Fill both blanks to create a route with a dynamic user ID and a nested settings page.

Svelte

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

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

A[userId]

Bsettings

C[settings]

Dprofile

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets for static folder names.

Not using square brackets for dynamic parameters.

The dynamic user ID is represented by a folder named [userId]. The nested settings page is a folder named settings. Together they form the route /[userId]/settings.

5fill in blank

hard

Fill all three blanks to create a route that shows a blog post by slug with an edit page nested inside.

Svelte

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

// The dynamic slug folder is [3]

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

A[slug]

Bedit

C[postSlug]

Dedit-post

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect folder names for dynamic parameters.

Confusing the nested edit folder name.

The dynamic slug folder is named [slug]. The nested edit page is a folder named edit. The comment confirms the dynamic folder is [slug].