Made withSvelteClip

SvelteKit Crash Course Tutorial #4 - Pages & Routes

N

Net Ninja

Creator on the Svelte channel

Watch on YouTube ↗

41K viewsJan 5, 202210:27 runtime

Learn the fundamentals of file-based routing in SvelteKit to build multi-page applications. This tutorial demonstrates how to create pages by adding Svelte components to the `routes` directory, where `about.svelte` becomes the `/about` route. Discover how to structure nested…

Chapters

#svelte#clip#frontend

File-Based Routing

SvelteKit uses a file-based routing system where Svelte components created inside the src/routes directory automatically become pages on your site.

Page Routes: The name of a component file determines its URL path. For example, src/routes/about.svelte creates the /about page.
Index Pages: A file named index.svelte serves as the root page for its directory. src/routes/index.svelte is the site's homepage (/).

Scoped Styles (CSS)

Styles defined in a <style> tag within a Svelte component are scoped by default, meaning they only apply to the elements within that specific component.

Note
SvelteKit achieves this by adding a unique, randomly generated class (e.g., .svelte-xyz) to every element within a component's markup. It then appends this unique class to your CSS selectors, ensuring the styles cannot leak out and affect other components.

Nested Routes

For better organization, you can create nested routes by creating subfolders within the src/routes directory.

Folder Structure: The folder path directly maps to the URL path. For example, the component at src/routes/guides/hello.svelte is available at /guides/hello.
Folder Index: To create a page for the folder's root path (e.g., /guides), create an index.svelte file inside that folder: src/routes/guides/index.svelte.

Client-Side Navigation

When you use standard <a> tags to link between pages in your SvelteKit app, a full page reload does not occur.

Request Interception: SvelteKit intercepts the navigation request and handles it on the client side.
Component Swapping: Instead of fetching a new HTML document from the server, SvelteKit dynamically unmounts the current page component and mounts the new one.

Tip
This process provides an extremely fast, instantaneous navigation experience that feels like a single-page application (SPA).

Introduction to File-Based Routing

All right then. So in the last lesson, we looked at this index component, and then we previewed the site in a browser. This is the component we saw, right? So this index component is kind of like the home page of our website, and it must be named index.svelte. That's important. But we can also add another page component if we wanted to inside this folder as well, and then that would represent a different URL path or route on our website.

For example, we might want to set up a page for the website which is an about page, and we might want the path or route for that page to be /about. Now to create that routing page, all we do is make a new Svelte component in the routes folder called about.svelte and then this about component would be shown for the /about path. So the route or the path that's generated will match whatever we call our Svelte components. So the name of the component is important. If we made a component called abc.svelte, it would create a route for that page component, which would be /abc, the name of the component.

Creating the About Page Component

For now, let's just create a bit of template inside this about component. So then, first of all, what I'm going to do is create a bit of a template for this component. And we don't need a script inside this component yet because we're not going to have any dynamic variables or any additional functionality. So we'll start off with a template which is going to be a div, and that's going to have a class of about. And then inside that, we'll have an h2 which will be the title to say, "About Us." And then below that, we'll have a paragraph tag with a load of lorem ipsum inside it.

All right, then. So that's the basic kind of template, something very simple. Down here, we're going to do a style tag as well. And I'm just going to paste in this single style, very much like the style we had in the homepage for the index, but this time for the about page. And by the way, these styles, they are scoped to particular components. So if I create a style inside here, then it's only going to be for this component.

So if I had a div in here, for example, with a class of index, and I said hello in there, then this index class is not going to get applied to this because the style is scoped to only elements inside this component. And SvelteKit does that by appending or prepending these different random strings of numbers and letters to class names in a particular component. I'll show you that in a minute when we preview this in a browser. Let me get rid of that for now, though, and save it.

How SvelteKit Scopes CSS

All right, then. So what I'm going to do is go to /about like so and hit enter. And we can see now the about us component. Right, so this is working. This was the name of the component, about, and so therefore that is the URL we get this about component when we go to that.

All right then. So I wanted to show you the styles that are scoped to particular components. So let me just inspect this first of all. And we're on the about page, and check this out. We have the about class that we gave to the div, but also in all of the different elements inside this component, we have this random string of letters right here. So this is something that SvelteKit applies to each of these elements inside this component, and it's specific, this class, to this particular component. If we go to the index page, let me take this off and go to the index page, then you'll notice this random class right here on all of these different elements inside the index component is different. So this class is specific for this index component, right?

And then when it injects styles into our HTML page, it uses this class that it created for that component as well, and it attaches it to our own class so that scopes it to only index classes inside this particular component. All right, so that's how it scopes the CSS to only elements inside the component where we make the CSS.

Nested Routes Using Subfolders

Now what if we went to a route that doesn't exist? So say for example, I go to /guides. Well, we don't have a component for that, so we get this 404 error component instead. So this route does not yet exist.

Now, if we wanted to create that /guides route, we could create a guides.svelte component to do it. And that would work, right? But there's also another way to do it. So when we're creating routes and page components, we can also do that inside subfolders, and the name of that folder would be reflected and incorporated in the route path.

For example, if I was to create a folder with the name of guides, and then inside that folder I created a new component, and we could call that anything, it doesn't really matter, hello.svelte, then the route path for this hello component would be /guides/hello. So the path mirrors the folder and then file name structure.

So let me just add in a tiny bit of template in this file so that we can test out the route later on. So maybe just a div with some text inside it or something. All right.

So, what if I wanted a component for just /guides? Well all we'd have to do for that is make an index.svelte component inside the guides folder. Because when we have a component called index, Svelte treats that component as the root component for whatever folder it's in. So much like the index component directly inside the routes folder is the root component for the whole website, the index component inside the guides folder is the root component for /guides. So to see this page component, we just visit guides, or rather /guides in the browser.

Organizing Routes with Subfolders

So, why choose this method of creating subfolders for routes instead of just putting all of the routes and components directly in the top level routes folder? Well, this way you can organize your different parts of the site in a more logical way, right? And you can structure your site URLs in a more logical way too. So typically, I'd create a subfolder if there was going to be several different components inside that folder that uses that route structure. Because I might want /routes and have an index for that, but also /routes/[slug] or ID, so that component would go inside this folder as well. Or /guides/recent to get the recent guides or something like that. Okay.

Building the Guides Index Page

Anyway, let's add a bit of template inside this new guides index component. All right, so first of all, I'm going to create a div with a class of guides so we can style this in a second. And then inside here, we'll just have a ul. And each li tag in here is eventually going to be some kind of guide title, right? So let's do an li tag and then inside that an anchor tag. Now at the minute, we'll just say to / the root of the website, but later on, we'll add in the proper href attributes. So the idea being when we click on a guide title, we're eventually going to go to the details page of a particular guide. So I'm just going to call this Guide 1 to be super creative and then do another one which I'll call Guide 2. All right, so that'll do. Dead simple template.

Now down here, I'm going to do a style tag as well, just so we can style this up a little bit. And I'm going to paste in a few different styles. So first of all, we target the guides and we give that a margin top of 20 pixels. Then the ul, we say list-style-type: none, padding: 0. Then the anchor tags inside the ul, we say display: inline-block, margin-top: 10px, padding: 10px, and a border as well, which is this kind of semi-transparent gray color. All right, then. So let's see if this works in the browser.

And now in the browser, if I go to /guides like so, press enter, we see this new guides page. Awesome. So that's working. So you know, like these were links, and they both went to just /. Well, that is the root of the website, right? It should be this page right here. So if I click on one of these links, we should just get directed to that root page, that index page of the whole site. I'm going to do that, I'm going to click on this, and yep, I get re-routed to this welcome page. Same for guide 2, click on that, and we see this web page again.

Now when we're doing this, when we're clicking around the website using links on the website, we're not actually sending a request to the server for a new HTML page. What happens is SvelteKit intercepts that request, and it says, okay, where do you want to go? It looks at the link where we're heading to, and it says you want to go to the home page. So what I'm going to do is I'm going to take away this component from the page and instead mount this component. And it just switches out the components for us, the page components, and that's why it's really quick to go from one page to another. If I click on this, all right, pops in instantly. Cool. So let's add a few more links then.

All right, so I'm going to open up the root index file right here, and at the bottom of the template, I'm just going to paste in a couple of links. So one to /guides, which is going to show us that guides page right here, this index component inside the guides folder. Then a link to /about, which is going to show us the about component. Now I'm going to do something similar on the about page at the bottom as well. So we have one to /guides and then this one, one to just /, and we'll say, oops, Home on there. So that takes us back to the home component, this index one. All right.

So we have those links now. Let's see if this all works. All right, so if we click on the about link, we see the about component. We can go back home as well. We can click on view guides, and we can click on one of these to go back home. Awesome. So this is really quick. Now we can quickly navigate to one page from another and it's pretty much instantaneous because SvelteKit just handles all of the routing on the front end.

And by the way, I just want to show you that we can view that hello component by going to /guides/hello. That was the URL structure, right? Because we had the hello component inside the guides folder. If I press enter on this, we see the hello component. Awesome.