Route Definition
In file-based routing, you create routes by placing .svelte
files in the routes
directory. Each file automatically becomes a route based on its filename and location.
Unlike code-based routing where you manually define route mappings, file-based routing automatically generates the router configuration for you. This generated code lives in the .router
directory and exports methods and properties you'll use throughout your application for navigation and route management
You can access these generated exports through the sv-router/generated
entry point:
import { navigate, ... } from 'sv-router/generated';
NOTE
Routes are case-insensitive and trailing slashes are ignored, meaning /about
and /About/
are treated as the same route.
Flat Mode or Tree Mode
When defining routes, you can choose between two organizational structures: flat or tree. Flat mode defines all routes at the root level, while tree mode organizes routes in a hierarchical directory structure.
# Flat
routes
├── about.svelte ➜ /about
├── about.contact.svelte ➜ /about/contact
├── about.work.svelte ➜ /about/work
└── about.work.mywork.svelte ➜ /about/work/mywork
# Tree
routes
└── about
├── contact.svelte ➜ /about/contact
├── index.svelte ➜ /about
└── work
├── index.svelte ➜ /about/work
└── mywork.svelte ➜ /about/work/mywork
You can effectively combine both modes within the same router configuration for maximum flexibility.