Route groups in Svelte - Mini Project: Build & Apply

Organizing Routes with Route Groups in SvelteKit

📖 Scenario: You are building a small website with multiple pages. To keep your routes organized, you want to group related pages together using route groups in SvelteKit.

🎯 Goal: Create a SvelteKit project structure that uses route groups to organize pages under a common URL segment without affecting the URL path.

📋 What You'll Learn

Create a route group folder named (dashboard) inside the src/routes directory.

Inside the (dashboard) folder, create two pages: index.svelte and settings.svelte.

Add a configuration variable dashboardTitle in src/routes/(dashboard)/index.svelte with the value 'Dashboard Home'.

Use the route group so that the URL paths are / for the home page, /dashboard for the dashboard index, and /dashboard/settings for the settings page.

Add a navigation menu in src/routes/+layout.svelte linking to /, /dashboard, and /dashboard/settings.

💡 Why This Matters

🌍 Real World

Route groups help keep large SvelteKit projects organized by grouping related pages without affecting URLs, making maintenance easier.

💼 Career

Understanding route groups is important for building scalable web apps with SvelteKit, a popular modern framework.

1

Create the route group folder and pages

Create a folder named (dashboard) inside src/routes. Inside (dashboard), create two files: index.svelte and settings.svelte. In src/routes/+page.svelte, create a simple home page with the text Home Page.

Svelte

// Create folder (dashboard) inside src/routes
// Create index.svelte and settings.svelte inside (dashboard)
// Create src/routes/+page.svelte with Home Page text

Hint

Remember, route groups are folders with parentheses around their name, like (dashboard).

2

Add a configuration variable in the dashboard index page

In src/routes/(dashboard)/index.svelte, add a const variable named dashboardTitle and set it to the string 'Dashboard Home'. Display this variable inside an <h1> tag instead of the fixed text.

Svelte

Home Page



  // Your code here

{dashboardTitle}


Dashboard Settings

Hint

Use a <script> block to declare the variable and then use curly braces to display it.

3

Add navigation links in the layout

Create a file src/routes/+layout.svelte. Inside it, add a navigation menu with three links: <a href='/'>Home</a>, <a href='/dashboard'>Dashboard</a>, and <a href='/dashboard/settings'>Settings</a>. Use the <slot /> tag to render child pages.

Svelte

Hint

Use semantic HTML tags like <nav> and <main> for accessibility.

4

Verify route group URLs and final structure

Ensure that the route group (dashboard) does not appear in the URL path. The URLs should be / for the home page, /dashboard for the dashboard index, and /dashboard/settings for the settings page. Confirm the folder structure includes src/routes/+page.svelte, src/routes/+layout.svelte, and the (dashboard) folder with its pages.

Svelte

// Check your folder structure and URLs
// Your code here

Hint

Remember, route groups are folders with parentheses and do not appear in the URL path.