Sveltekit Routes

Sveltekit Routes

Getting routey

Everyone loves a good route, in Svelte kit we have a file structure routing system. The docs cover routing in-depth here Routing.

There are two types of routes, Pages, and Endpoints.

Pages

  • Display HTML to the user
  • Rendered on client and server (Can configure this option)

Endpoints

  • Used by Pages to get data
  • Only run on the server (Or in build when prerendering)
  • Returns JSON by default

Pages

Let's look into the routes folder that we made before, which holds all of our routes the name of the route is determined by the name of the file.

Screen Shot 2022-05-08 at 6.04.04 pm.png As we can see in here, we have a folder for routes and inside that lives an index.svelte /routes/index.svelte

Screen Shot 2022-05-08 at 6.09.06 pm.png

What happens here is that a file with 'index' will be considered the root of that folder, in this case, it'll be the site.com If we go into the /routes/todo/index.svelte and navigate to that in a browser it would be site.com/todo

Now if we get a little more creative maybe we could add in a file inside of the todo folder called "awesome" because we are awesome! You are awesome

Screen Shot 2022-05-08 at 6.14.41 pm.png

This really shows you how quick and easy it is to make a named route, but now you're wondering what were those dynamic routes and how do they work?

Dynamic routes are made using square brackets in their naming of the file [slug].svelte we do not need to use the word slug, but that word is what you'll be using in that file in the load function.

Let's make a dynamic route, we already have a done folder that contains a file called [slug].svelte.

First, with our app running we will navigate to the todos route and add in some todos. localhost:3000/todos

Screen Shot 2022-05-08 at 6.24.07 pm.png There's a bit of magic going on in the API files right now, we're going to avoid looking into that and just add in some todos and then make sure we tick at least one as done.

With one ticked as done, we can now navigate to that page. You should not see any errors, but you'll get a blank page. localhost:3000/todos/done/test If you are following this example you can navigate to the above link

A blank page with no errors is cool and all but we can make it better, let's get the name of this page displayed out to the user. We'll do that by using a load function.

Screen Shot 2022-05-08 at 6.37.36 pm.png

<script lang="ts" context="module">
    export async function load({ params }) {
        return {
            props: {
                done: params.slug
            }
        };
    }
</script>

<script lang="ts">
    export let done: string;
</script>

<div>{done}</div>

You can see that for a dynamic route the module will be loaded first on render, it's in here that you would want to make your API calls to get dynamic data to update this page with on load. In this example we are only returning the slug of the file name, again if you had called the dynamic route [something].svelte we would instead use params.something to find the parameter.

We can then open another script block that can get the data being passed into it from the above load. In this case, we are only returning props but in the sveltekit docs they show how you can also return a status status: response.status

Private modules

We have seen how easy it is to create routes but what about if we want a component or something like a layout to not be made into a route and still be held in the routes folder?

We can simply add _ or a . in front of that file and it'll be a private module, which means it can still be imported into any page and the like but will not be made into a route.

Give me layouts!

What's the point in all these components and routes if we're just going to reload the entire page? In many cases, you want to have a layout to group similar pages that'll have the same form of content. In that case, we'll be using a layout, a layout has a special naming convention in svelte it's __layout.svelte there are alsonested, and named layouts but we're just going to use plain layouts for now. Just remember it's a double underscore there in front of the word layout.

A layout will need to hold a slot or slots, these are used to present the data you have in those parts of the layout. We'll do a whole post on slots but for now here's the tutorial on it. The __layout.svelte is taking all the content given to it, and then placing it inside of it. Now all our pages have the same top-level components from the layout

Screen Shot 2022-05-08 at 6.58.15 pm.png