File-based routing in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is file-based routing in Svelte?

File-based routing means the app creates routes automatically based on the file names and folder structure inside the src/routes folder.

beginner

How does SvelteKit map a file named src/routes/about/+page.svelte to a URL?

The file about/+page.svelte becomes the page at URL /about automatically.

intermediate

What does a file named [id]/+page.svelte inside src/routes represent?

It represents a dynamic route where id is a variable part of the URL, like /123 or /abc.

beginner

How do nested folders inside src/routes affect routing?

Nested folders create nested URL paths. For example, src/routes/blog/post/+page.svelte maps to /blog/post.

beginner

What special file name is used to create the homepage in SvelteKit?

The file src/routes/+page.svelte creates the homepage at /.

In SvelteKit, what URL does src/routes/contact/+page.svelte map to?

A /contact.svelte

B /src/routes/contact

C /contact

D /contact/index

+page.svelte files inside src/routes map directly to URLs matching their folder path.

What does a file named [slug]/+page.svelte inside src/routes/blog represent?

A An error page

B A static page at /blog/slug

C A nested folder named slug

D A dynamic route matching /blog/anything

Square brackets create dynamic routes where the part inside brackets is a variable.

How do you create a nested route for /shop/products in SvelteKit?

A Create <code>src/routes/shop/products/+page.svelte</code>

B Create <code>src/routes/shop-products.svelte</code>

C Both A and D are correct

D Create <code>src/routes/shop/products/index.svelte</code>

Nested folders with +page.svelte create nested routes. For example, src/routes/shop/products/+page.svelte maps to /shop/products.

Which file creates the homepage route / in SvelteKit?

A src/routes/home.svelte

B src/routes/+page.svelte

C src/routes/index.svelte

D Both B and C

+page.svelte in the root routes folder creates the homepage.

What happens if you add a file named about/+page.svelte inside src/routes?

A It creates a route at /about

B It creates a route at /about/+page

C It causes an error

D It is ignored

The +page.svelte file inside a folder defines the page for that folder's route.

Explain how file names and folder structure inside src/routes define the URLs in SvelteKit.

Think about how a website's pages are organized like folders and files on your computer.

Describe how you would create a dynamic blog post page that shows different posts based on the URL.

Imagine the URL changes but the page layout stays the same.