Route groups in Svelte - Deep Dive

Overview - Route groups

What is it?

Route groups in Svelte are a way to organize routes in your app without affecting the URL path. They let you group related pages together in folders for better structure and code sharing, but the group name does not appear in the web address. This helps keep URLs clean while keeping your project files neat and manageable.

Why it matters

Without route groups, organizing many related pages can make URLs long and confusing, or force you to repeat code. Route groups solve this by letting you group routes logically in your project without changing the URL. This keeps your app easier to maintain and your URLs user-friendly, improving both developer experience and user navigation.

Where it fits

Before learning route groups, you should understand basic Svelte routing and how file-based routing works. After mastering route groups, you can explore advanced routing features like layouts, nested routes, and dynamic parameters to build complex apps.

Mental Model

Core Idea

Route groups let you organize routes inside your project without changing the URL structure users see.

Think of it like...

It's like having folders inside your desk drawer to keep papers organized, but when you hand someone a paper, you don't mention which folder it came from.

Project Folder Structure
┌───────────────┐
│ src/routes/   │
│ ├─ (admin)/   │  <-- Route group folder, not in URL
│ │  ├─ dashboard.svelte
│ │  └─ users.svelte
│ ├─ about.svelte
│ └─ index.svelte

URL Paths
/
/about
/dashboard  <-- from (admin)/dashboard.svelte
/users      <-- from (admin)/users.svelte

Build-Up - 6 Steps

1

Foundation

Basic file-based routing in Svelte

Concept: Svelte uses files in the routes folder to create URLs automatically.

In Svelte, each file inside src/routes becomes a page. For example, src/routes/about.svelte is shown at /about in the browser. The file src/routes/index.svelte is the homepage at /.

Result

You get a website where URLs match your file names automatically.

Understanding file-based routing is key because route groups build on this by changing folder structure without changing URLs.

2

Foundation

Folders create URL segments

Concept: Folders inside routes add parts to the URL path.

If you put a file inside src/routes/blog/post.svelte, the URL becomes /blog/post. Each folder adds a segment to the URL path.

Result

Your URLs reflect the folder structure exactly.

Knowing that folders normally add URL parts helps you see why route groups are special—they break this rule.

3

Intermediate

Introducing route groups syntax

Concept: Folders with parentheses around their name become route groups that do not add to the URL.

Create a folder named (admin) inside src/routes. Files inside (admin) appear at the root URL level, ignoring the (admin) folder name. For example, (admin)/dashboard.svelte is at /dashboard, not /admin/dashboard.

Result

You can organize files in folders without changing the URL path users see.

Route groups let you separate concerns in your project without forcing URL changes, improving code clarity and user experience.

4

Intermediate

Combining route groups with nested routes

🤔Before reading on: Do you think nested routes inside route groups affect the URL path? Commit to your answer.

Concept: Route groups can contain nested folders and files, but the group folder name is always hidden from the URL.

Inside (admin), you can have folders like settings/profile.svelte. The URL will be /settings/profile, not /admin/settings/profile. The group folder is invisible in the URL but visible in the project.

Result

You get clean URLs even with deep folder nesting inside route groups.

Understanding that route groups hide folder names from URLs helps you design clean URL structures while keeping your code organized.

5

Advanced

Using route groups for shared layouts

🤔Before reading on: Can route groups help share layouts or code between grouped routes? Commit to your answer.

Concept: Route groups can hold layout files that apply to all routes inside the group, enabling shared UI parts without URL changes.

Place a +layout.svelte file inside a route group folder like (admin). All pages inside (admin) use this layout automatically, so you can share navigation bars or sidebars for admin pages without affecting URLs.

Result

You get consistent UI for grouped routes with clean URLs.

Knowing route groups support layouts lets you build modular, maintainable apps with shared UI components.

6

Expert

Route groups and route parameters interaction

🤔Before reading on: Do route groups affect how dynamic route parameters appear in URLs? Commit to your answer.

Concept: Route groups do not interfere with dynamic parameters; parameters still appear in URLs as expected, ignoring the group folder name.

If you have (admin)/[userId].svelte, the URL is /123 for userId=123, not /admin/123. The group folder is invisible, but parameters work normally.

Result

Dynamic routing works seamlessly with route groups, keeping URLs clean and meaningful.

Understanding this prevents confusion when combining route groups and dynamic routes in complex apps.

Under the Hood

SvelteKit's router reads the filesystem and treats folders with parentheses as special markers. When building the URL tree, it skips these folders, so their names do not appear in the URL path. Internally, the router still uses the folder structure to resolve components and layouts, but the URL generation ignores group folder names.

Why designed this way?

This design balances developer convenience and user experience. Developers get to organize code logically without forcing URL changes that might confuse users or break links. Alternatives like ignoring folder structure entirely would lose organization benefits, while including all folders in URLs would clutter paths.

Filesystem to URL Mapping
┌─────────────────────────────┐
│ src/routes/                │
│ ├─ (group)/               │
│ │  ├─ page.svelte          │
│ │  └─ +layout.svelte       │
│ └─ about.svelte            │
└─────────────────────────────┘

Router builds URL:
(group)/page.svelte  --> /page
about.svelte        --> /about

Note: (group) folder skipped in URL path

Myth Busters - 4 Common Misconceptions

Quick: Do you think route group folder names appear in the URL path? Commit to yes or no.

Common Belief: Route group folders add their name as a segment in the URL like normal folders.

Reality: Route group folders are ignored in the URL path; their names do not appear in URLs.

Why it matters: Thinking group names appear in URLs leads to confusion and broken links when URLs don't match expectations.

Quick: Do you think route groups change how dynamic route parameters work? Commit to yes or no.

Common Belief: Route groups interfere with or hide dynamic route parameters in URLs.

Reality: Route groups do not affect dynamic parameters; parameters appear in URLs as usual.

Why it matters: Misunderstanding this causes bugs in routing logic and incorrect URL assumptions.

Quick: Do you think route groups can be used to share layouts? Commit to yes or no.

Common Belief: Route groups are only for organizing files and cannot hold layouts or shared components.

Reality: Route groups can contain layout files that apply to all routes inside the group.

Why it matters: Missing this limits app design and code reuse opportunities.

Quick: Do you think route groups affect the browser's address bar behavior? Commit to yes or no.

Common Belief: Route groups change how URLs appear in the browser address bar.

Reality: Route groups only affect project structure; URLs in the browser remain clean and unchanged.

Why it matters: Confusing this leads to unnecessary URL rewriting or routing hacks.

Expert Zone

1

Route groups can be nested inside each other, and all group folder names are hidden from URLs, allowing deep logical organization without URL clutter.

2

Layouts inside route groups cascade down to nested routes, enabling complex UI hierarchies without affecting URL paths.

3

Route groups do not affect server-side routing or API endpoints, which may require separate configuration.

When NOT to use

Avoid route groups when you want folder names to appear in URLs for SEO or user clarity. Instead, use normal folders. Also, do not use route groups for API routes where URL paths must match exactly.

Production Patterns

In production, route groups are used to separate admin, user, and public pages logically without changing URLs. They help share layouts and components for grouped routes, improving maintainability and reducing code duplication.

Connections

Modular programming

Route groups build on modular organization principles by grouping related code without exposing internal structure.

Understanding modular programming helps grasp why hiding folder names in URLs improves code clarity without sacrificing user experience.

URL rewriting in web servers

Route groups achieve a similar effect to URL rewriting by hiding folder names from URLs but do it at the framework level.

Knowing URL rewriting helps appreciate how route groups simplify routing without extra server config.

File system abstraction in operating systems

Route groups abstract the file system structure from the URL path, similar to how OS virtual file systems hide physical storage details.

This connection shows how abstraction layers improve usability by separating internal organization from external presentation.

Common Pitfalls

#1 Expecting route group folder names to appear in URLs.

Wrong approach:

src/routes/(admin)/dashboard.svelte accessed at /admin/dashboard

Correct approach:

src/routes/(admin)/dashboard.svelte accessed at /dashboard

Root cause:

Misunderstanding that parentheses in folder names hide them from URLs.

#2 Placing API routes inside route groups expecting URL paths to include group names.

Wrong approach:

src/routes/(api)/users.js expecting /api/users endpoint

Correct approach:

src/routes/api/users.js for /api/users endpoint without parentheses

Root cause:

Confusing route groups with normal folders for API routing.

#3 Trying to use route groups to create URL segments for SEO or navigation.

Wrong approach:

Using (blog) folder to get /blog/posts URL segment

Correct approach:

Use blog/ folder (without parentheses) to get /blog/posts URL

Root cause:

Misusing route groups which hide folder names instead of showing them.

Key Takeaways

Route groups in Svelte let you organize routes in folders without adding those folder names to the URL path.

They keep your project files neat and allow shared layouts or components for grouped routes without changing URLs.

Route groups work seamlessly with dynamic routes and nested folders, keeping URLs clean and user-friendly.

Misunderstanding route groups can cause routing bugs or broken links, so knowing their behavior is crucial.

Experts use route groups to build modular, maintainable apps with clear URL structures and shared UI.