File-based routing in Svelte - Step-by-Step Execution

Concept Flow - File-based routing

Create file in routes folder

↓

File name defines URL path

↓

SvelteKit reads files

↓

Generate route automatically

↓

User visits URL

↓

Render matching component

↓

Show page content

File-based routing means the file name and location in the routes folder decide the URL path automatically.

Execution Sample

Svelte

// File: src/routes/about.svelte
<script>
  let message = 'Welcome to About page';
</script>
<h1>{message}</h1>

This code creates an About page at URL /about showing a welcome message.

Execution Table

Step	Action	File/URL	Result
1	Create file about.svelte in src/routes	N/A	Route /about is defined
2	SvelteKit reads routes folder	src/routes/about.svelte	Registers /about route
3	User visits /about URL	/about	SvelteKit matches route
4	Render about.svelte component	/about	Page shows 'Welcome to About page'
5	User visits / URL	/	No about.svelte match, default route used
6	Create file index.svelte in src/routes	N/A	Route / is defined
7	User visits / URL again	/	Page shows content from index.svelte

💡 Routing stops when matching file component is found or default route is used.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 6	After Step 7
routes	empty	['about.svelte']	['about.svelte']	['about.svelte']	['about.svelte']	['about.svelte', 'index.svelte']	['about.svelte', 'index.svelte']
currentURL	none	none	none	/about	/about	/	/
renderedComponent	none	none	none	about.svelte	about.svelte	none	index.svelte

Key Moments - 3 Insights

Why does creating a file named about.svelte create a route at /about?

Because SvelteKit uses the file name in the routes folder to automatically create the URL path, as shown in execution_table step 1 and 2.

What happens if there is no index.svelte file for the root URL?

No route matches /, so the app shows a 404 or fallback page until index.svelte is created, as seen in execution_table step 5 and 6.

How does SvelteKit know which component to render when visiting a URL?

It matches the URL path to the file name in the routes folder and renders that component, shown in execution_table steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered when the user visits /about?

A about.svelte

B index.svelte

C No component

D default.svelte

💡 Hint

Check execution_table step 4 where /about URL is matched and renderedComponent is about.svelte.

At which step does the route for / get defined?

A Step 1

B Step 6

C Step 3

D Step 7

💡 Hint

Look at execution_table step 6 where index.svelte is created defining the / route.

If you rename about.svelte to contact.svelte, what changes in the routing?

A Route /about still works

B Both /about and /contact routes exist

C Route /contact is created instead of /about

D No routes exist

💡 Hint

File name defines URL path as explained in concept_flow and shown in variable_tracker routes array.

Concept Snapshot

File-based routing in SvelteKit means:
- Files in src/routes folder create URL paths
- File name matches the URL segment
- index.svelte is the root route /
- No extra config needed
- Visit URL, matching file renders automatically

Full Transcript

File-based routing in SvelteKit works by placing .svelte files inside the src/routes folder. Each file name becomes a URL path segment automatically. For example, about.svelte creates the /about route. When a user visits a URL, SvelteKit matches it to the file and renders that component. The root URL / is matched by index.svelte. If no matching file exists, the route is not found. This system requires no manual route setup, making it simple and intuitive. The execution table shows creating files, visiting URLs, and rendering components step-by-step. Variables track the routes available, current URL, and which component renders. Common confusions include why file names define URLs and what happens if index.svelte is missing. The visual quiz tests understanding of these steps and effects of renaming files. This method helps beginners see how file structure controls routing in SvelteKit.