SvelteKit Routing Explained: A Beginner’s Guide

For developers transitioning from other frameworks or those new to web development, understanding routing is crucial. In this blog post, we’ll dive deep into SvelteKit’s routing mechanisms, exploring its file-based approach and demonstrating how to create both static and dynamic routes.

The Essence of SvelteKit Routing

At its core, SvelteKit employs a file-based routing system similar to Next.js if you have worked with it. This means that the structure of your project’s files and directories directly corresponds to the routes in your application. This approach not only simplifies the routing process but also makes your project structure more intuitive and easier to navigate.

Understanding the Routes

In a SvelteKit project, the heart of routing lies in the `src/routes` directory. Here’s a basic overview of how it works:

– Files named `+page.svelte` become pages in your application.
– The path to these files determines their URL.
– Directories can contain their own `+page.svelte` files, creating nested routes.

Let’s look at some examples to clarify this concept.

Creating Basic Routes

To create a simple route in SvelteKit, you just need to add a `+page.svelte` file in the appropriate directory. Here are a few examples:

1. Home Page (`/`)
Create a file at `src/routes/+page.svelte`:

<h1>Welcome to my SvelteKit site!</h1>

2. About Page (`/about`)
Create a file at `src/routes/about/+page.svelte`:

<h1>About Us</h1>
<p>Learn more about our company here.</p>

3. Contact Page (`/contact`)
Create a file at `src/routes/contact/+page.svelte`:

<h1>Contact Us</h1>
<p>Get in touch with our team.</p>

With just these files, you’ve created three distinct routes in your application!

Dynamic Routes

One of the powerful features of SvelteKit’s routing system is the ability to create dynamic routes. These are routes that can capture and use parameters from the URL.

To create a dynamic route, use square brackets in your directory or file name. For example:

User Profile Page (`/user/[username]`)
Create a file at `src/routes/user/[username]/+page.svelte`:

<script>
import { page } from '$app/stores';
</script>

<h1>User Profile</h1>
<p>Welcome, {$page.params.username}!</p>

In this example, `[username]` is a dynamic parameter. If a user visits `/user/john`, the `username` parameter will be “john”.

Nested Routes

SvelteKit also supports nested routes, which are particularly useful for creating complex layouts. Here’s how you might structure a blog with nested routes:

src/routes/
├── +page.svelte
├── blog/
│ ├── +page.svelte
│ └── [slug]/
│ └── +page.svelte

In this structure:
– `/` is handled by `src/routes/+page.svelte`
– `/blog` is handled by `src/routes/blog/+page.svelte`
– `/blog/my-first-post` is handled by `src/routes/blog/[slug]/+page.svelte`

Route Parameters and Props

To access route parameters in your components, SvelteKit provides the `$page` store. You can use it like this:

<script>
import { page } from '$app/stores';
</script>

<h1>Post: {$page.params.slug}</h1>

Programmatic Navigation

While links (`<a>` tags) work for navigation, sometimes you need to navigate programmatically. SvelteKit provides the `goto` function for this purpose:

<script>
import { goto } from '$app/navigation';

function handleClick() {
goto('/about');
}
</script>

<button on:click={handleClick}>Go to About</button>

Conclusion

SvelteKit’s routing system strikes a balance between simplicity and power. Its file-based approach makes it intuitive to create both simple and complex route structures, while features like dynamic routes and nested layouts provide the flexibility needed for modern web applications.

As you continue to explore SvelteKit, you’ll discover even more related features, such as route guards, error handling, and API routes, server side rendering.