File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at routes/about/+page.svelte automatically creates the /about page, no central config needed.
Why it exists
Traditional routing requires maintaining a central configuration file that maps URL paths to components. This creates two sources of truth—the component file and the route declaration—that can easily fall out of sync. File-based routing was created to eliminate this manual step and reduce boilerplate by enforcing a simple convention.
The mental model
Think of your app's routes like your computer's filesystem. The URL path a user visits directly mirrors the directory path in your codebase. If a component file exists at src/routes/dashboard/settings/+page.svelte, the framework automatically makes it available at the /dashboard/settings URL. There is no separate step to register the route; the file's location IS the registration.
How it works
Frameworks like SvelteKit, Next.js, and Nuxt scan a special directory (e.g., src/routes or app/) at build time. Each folder becomes a segment of the URL. Special filenames inside these folders define what gets rendered. For example, in SvelteKit, a +page.svelte file defines the UI for that route. Folders with bracketed names, like [slug], create dynamic routes that capture parts of the URL as parameters.
When to use it
This is the default, idiomatic way to build applications in most modern meta-frameworks. It is ideal for content-heavy sites, blogs, e-commerce stores, and dashboards where the URL structure is hierarchical and meaningful to the user. It simplifies development by making navigation intuitive to reason about.
When not to use it
It can be less intuitive for highly dynamic, non-hierarchical routing where paths are generated entirely at runtime or have complex, overlapping rules. Even then, most frameworks provide programmatic escape hatches for these edge cases, so you rarely abandon the system entirely.
One canonical example
In SvelteKit, to create a blog, you would create a directory src/routes/blog/[slug]. Inside, you'd place a +page.svelte file. This single file acts as a template for all blog posts. When a user visits /blog/hello-world, SvelteKit renders that component and provides the slug parameter with the value "hello-world", which the page can use to fetch and display the correct post's content.
Interview question
What is the main problem that file-based routing aims to solve compared to traditional routing approaches?
- a.The difficulty of implementing dynamic routes that capture URL parameters.
- b.The need for frameworks to parse route configurations at runtime, impacting performance.
- c.The lack of a clear, intuitive way to structure an application's navigation.
- d.The potential for URL paths and their corresponding component files to become out of sync.Correct
Why? this is the answer
File-based routing was created to eliminate the 'two sources of truth' problem, where a separate central configuration file could easily fall out of sync with component files. It makes the filesystem the single source of truth for routes. While it simplifies dynamic routes (Option A) and offers intuitive structure (Option C), these are benefits stemming from solving the core synchronization problem, not the primary problem itself.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on routing — each one lists the topics its interview covers.
See open roles