Route groups in Svelte

Introduction

Route groups help organize your app's pages without changing the URL. They keep your routes tidy and easy to manage.

You want to group related pages together in your project folder for better structure.

You need to apply the same layout or logic to multiple pages without affecting their URLs.

You want to keep URLs clean while organizing routes in folders.

You want to share components or data loading logic across several pages.

You want to separate admin pages from user pages in your project without changing URLs.

Syntax

Svelte

src/routes/(groupName)/+page.svelte

The folder name is wrapped in parentheses to create a route group.

Pages inside this folder keep their normal URL paths without including the group name.

Examples

This groups dashboard pages but the URL is just / for the root page.

Svelte

src/routes/(dashboard)/+page.svelte

This page URL is /settings, not /dashboard/settings.

Svelte

src/routes/(dashboard)/settings/+page.svelte

Users page grouped under admin folder but URL is /users.

Svelte

src/routes/(admin)/users/+page.svelte

Sample Program

Both pages are inside the (app) group folder. The URLs are / for the root page and /about for about page. The group name does not appear in the URL.

Svelte

// Folder structure:
// src/routes/(app)/+page.svelte
// src/routes/(app)/about/+page.svelte

// src/routes/(app)/+page.svelte
<script>
  export let name = 'Home';
</script>
<h1>Welcome to {name} page</h1>

// src/routes/(app)/about/+page.svelte
<h1>About Us</h1>
<p>This page is grouped but URL is /about</p>

Important Notes

Route groups only affect folder structure, not the URL path.

You can nest route groups inside each other for complex apps.

Use route groups to share layouts or data loading logic easily.

Summary

Route groups organize routes without changing URLs.

Use parentheses around folder names to create groups.

They help keep your project clean and maintainable.