File-based routing in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What component renders for the URL /blog/42?

Given this file structure in a SvelteKit project:

src/routes/
├── +page.svelte
├── blog/
│   ├── +page.svelte
│   └── [id]/+page.svelte
└── about/+page.svelte

Which component will render when the user visits /blog/42?

A src/routes/blog/+page.svelte

B src/routes/blog/[id]/+page.svelte

C src/routes/+page.svelte

D src/routes/about/+page.svelte

💡 Hint

Dynamic segments in file names match URL parts like numbers or words.

The URL /blog/42 matches the dynamic route [id] inside the blog folder. So src/routes/blog/[id]/+page.svelte renders.

📝 Syntax

intermediate

Which file name correctly defines a catch-all route?

In SvelteKit file-based routing, which file name correctly matches all routes under /docs, including nested paths like /docs/intro/setup?

A src/routes/docs/[all]/+page.svelte

B src/routes/docs/[all...]/+page.svelte

C src/routes/docs/[...all]/+layout.svelte

D src/routes/docs/[...all]/+page.svelte

💡 Hint

Catch-all routes use three dots inside square brackets.

The catch-all route syntax uses [...name] to match any nested path segments. So [...all] is correct.

🔧 Debug

advanced

Why does /profile show a 404 error?

Given this file structure:

src/routes/
├── +page.svelte
├── profile/[user]/+page.svelte

Visiting /profile shows a 404 error. Why?

A Because <code>profile/+page.svelte</code> is a directory, not a file.

B Because <code>profile/+page.svelte</code> is missing an <code>+layout.svelte</code> file.

C Because <code>profile/+page.svelte</code> is missing.

D Because the <code>profile</code> folder is missing a <code>+page.server.js</code> file.

💡 Hint

The route folder must contain a +page.svelte file directly for the path to work.

In SvelteKit, to serve /profile, the file src/routes/profile/+page.svelte must exist. If profile is a folder, the file must be inside it as +page.svelte. The correct is to have profile/+page.svelte as a file inside the folder.

❓ state_output

advanced

What is the value of params.id for URL /shop/123?

Given this file: src/routes/shop/[id]/+page.svelte with this script:

<script>
  export let params;
</script>

<p>ID: {params.id}</p>

What will be displayed when visiting /shop/123?

A ID: 123

B ID: shop

C ID: undefined

D ID: [id]

💡 Hint

Dynamic segments in the file name become keys in the params object.

The dynamic segment [id] captures the URL part 123 and passes it as params.id.

🧠 Conceptual

expert

Which file handles the route /dashboard/settings/profile?

Given this file structure:

src/routes/
├── dashboard/+layout.svelte
├── dashboard/settings/+page.svelte
├── dashboard/settings/profile/+page.svelte
├── dashboard/settings/profile/+layout.svelte

Which file is responsible for rendering the content at /dashboard/settings/profile?

A src/routes/dashboard/settings/profile/+page.svelte

B src/routes/dashboard/settings/+page.svelte

C src/routes/dashboard/+layout.svelte

D src/routes/dashboard/settings/profile/+layout.svelte

💡 Hint

Layouts wrap pages but do not replace them.

The +page.svelte file renders the page content. Layouts wrap around pages to provide shared UI but do not replace the page content.