How does the routing system work?

SvelteKit uses a filesystem-based router where routes are defined by the directory structure in your codebase [documentation/docs/20-core-concepts/10-routing.md:L1-L20].

Directory Structure Maps to Routes

The mapping is straightforward:

• src/routes is the root route
• src/routes/about creates an /about route
• src/routes/blog/[slug] creates a parameterized route where slug is a dynamic segment that captures values from URLs like /blog/hello-world

You can change the src/routes directory by editing the project config.

Route Files

Each route directory contains one or more route files identified by a + prefix. The key rule is:

• All files can run on the server
• All files run on the client except +server files
• +layout and +error files apply to subdirectories as well as the directory they live in

Server Routes with +server.js

You can define API routes or endpoints using +server.js files, which give you full control over the response. These files export functions corresponding to HTTP verbs (GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD) that take a RequestEvent argument and return a Response object [documentation/docs/20-core-concepts/10-routing.md:L295-L331].

For example, a GET handler in src/routes/api/random-number/+server.js would handle requests to /api/random-number.

You can also export a fallback handler to match any unhandled request methods [documentation/docs/20-core-concepts/10-routing.md:L378-L400].

Dynamic Parameters

When you have a route like /a/[b]/[...c] and a request to /a/x/y/z, the params object extracted from the URL pathname would be { "b": "x", "c": "y/z" } [documentation/docs/20-core-concepts/20-load.md:L263-L275].

FOLLOW_UPS:

• How do I handle form submissions in SvelteKit routes?
• What's the difference between +page and +server files?
• How does data loading work with the fetch function?