Routing in SvelteKit

[00:00:00]
>> So SvelteKit uses a thing called filesystem based routing. What that means is that the routes of your app, which is to say what the app should do when the user visits a particular URL, are defined by the directories in your code base. Every +page.svelte file inside source/routes, creates a page in your app.

[00:00:20]
In this app we currently have one page, which is source/routes/page.svelte, which you can see on the right here, which maps to the root of the application. If we navigate to the about page, you'll see that we see a 404 not found error because we haven't defined that route yet.

[00:00:38]
And we can fix that by adding a second page. In the file tree over here, just click the new file icon, and create about/page.svelte. And we can add some content to that page, we'll copy over the homepage, put that in there. And then just change that select and Command D to select both instances of the word home, and replace that with about.

[00:01:05]
So you can now see that we can navigate between home and about. And unlike a traditional multi-page app, when we navigate between these two routes, the content is being updated within the current document. We're not reloading the document and going all the way back to the server to get the new content.

[00:01:23]
So this gives us the best of both worlds. We get the fast server rendered startup, followed by instant navigation. Although this behavior can be configured if you do need something different. You'll notice, of course, that there was a bit of duplication in that last exercise. We had the nav bar repeated in both the home page and the about page.

[00:01:44]
This is a very common thing when you're building websites, you will have some part of your user interface that should be persistent throughout your app. And for that we use something called layouts. Instead of repeating that content in our page.svelte files, we're going to create a layout.svelte which contains that.

[00:02:00]
So let's create our layout file, again, hit the new file icon and +layout.svelte. And we're gonna move the navigation content out of page and into layout. You'll notice that it's not actually showing any page content now, and that's because we need to tell SvelteKit where that content should go.

[00:02:23]
So below here we're gonna add a slot element. So far so good, although if we now go to about we'll see that the navigation is doubled up, so we need to fix that by getting rid of it. So layout.svelte applies to every child page. That means sibling page.svelte files and every page.svelte in child directories.

[00:02:50]
And you can have as many layout files as you need that can be nested throughout your app. So if you have some sections of your app that should have a particular layout, you can add a layout.svelte that applies just to those pages