How does src/routes determine routing in SvelteKit?

What's really being asked

This question checks if you understand that SvelteKit uses a filesystem-based router where the directory structure inside src/routes directly determines the URL paths of the application. It also checks whether you know the plus-prefix convention for route files and can explain the difference between static segments and dynamic parameters.

The full answer

First, the root principle: src/routes corresponds to the root URL, and every subdirectory inside it becomes a route segment. Second, dynamic parameters: a folder named with brackets like [slug] creates a dynamic segment that matches any value in that URL position and exposes it as a parameter. Third, the plus prefix: only files starting with plus such as +page.svelte are treated as route files, which prevents helper or component files from accidentally becoming routes. Fourth, data loading: mention that +page.js or +page.server.js can export a load function to fetch and supply data to the page before rendering. Fifth, layout inheritance: note that +layout files apply to their own directory and all nested subdirectories unless explicitly reset.

The mistakes people make

Claiming that routes are declared in a central configuration file or a routes array like in React Router. Saying that any svelte file inside src/routes automatically becomes a page, which misses the plus prefix requirement. Confusing dynamic route segments with query parameters. Forgetting that +server files run only on the server and do not render pages. Asserting that you must manually register each route in svelte.config.js or vite.config.js.

What usually comes next

How would you create a restful API endpoint in SvelteKit? What is the difference between +page.js and +page.server.js? How do you handle catch-all or optional route parameters using double brackets or spread syntax? When would you use a layout reset? How does SvelteKit handle trailing slashes and why does it matter for SEO?

A concrete example

If your project has src/routes/+page.svelte for the home page, src/routes/about/+page.svelte for a static about page, and src/routes/blog/[slug]/+page.svelte for blog posts, then the generated URLs are slash, slash about, and slash blog slash hello dash world respectively. Visiting slash blog slash hello dash world would render the blog post page and make the slug parameter available to the load function in +page.js and to the page component through the data or params props.