Routing

SvelteKit includes a folder based router that updates the page contents after intercepting navigations. This means that the folder structure of the /src/routes folder is going to be the route structure of our application.

Right now, the only files we have within our routes folder is our +page.svelte file and +layout.svelte file. Our +page file is what we've mostly been working out of up to this point. If we go to our browser, this is the page we see at our root url. Let's go ahead and create a new page in our routes folder. First, we need to add a new folder. Let's name it products. Within this folder we can add a +page.svelte file and paste in some code that will display different products on the page. Now, if we go back to our browser and navigate to /products, we will see our new products page is being displayed.

As we can see, the folder name determines the route. If we change the name of our folder from 'products' to 'shop', we see there is no longer a page at /products and instead it lives at /shop.

In order to create nested routes, we need to create a folder for each sub-route. For example, if we are going to have a collection of products and we want each product to have a /product sub-route, we can do this by creating a new folder within our products folder called product. Now, let's add a product page within this folder by adding another folder called cup with a +page.svelte file within it. In this page, let's add some code to display our cup product info. Now, if we go to our browser and view the page at the route /products/product/cup, we will see our cup page is being displayed.

We can add as many folders as we want within this product folder and they will all be a sub-route of /products/product. We can even add more folders within the product folder to created deep nested routes. For instance, if we add another folder within our product folder called apparel and add yet another folder within that one called t-shirt and a page file, we will see this page displayed at the route products/product/apparel/t-shirt.

Now, this is great, but if we were to visit /products/product/apparel, we will get an error page because this route does not exist. Every folder within our routes folder can have a +page.svelte file within it which will become the root page of that route. If we add +page.svelte within our apparel folder, a page now exists at this route.

We can also use advanced routing with SvelteKit using dynamic parameters. For example, our product pages will all be the same structure, and the only thing changing is the content. Rather than duplicating all the code for each page, we can pass a dynamic parameter in the url, such as the product's name, and we can use that param to then fetch the data associated with that product name and display the specified product info on our page.

To do this, we can change the name of our cup/+page.svelte page to be the name of dynamic parameter within square brackets. In this case, our dynamic parameter is the product's name, so we can update the file name to be [name]/+page.svelte. Now, within this page, we can access that dynamic parameter from the page variable in the package $app/stores. In our script, let's import page from $app/stores, and our dynamic parameter will be under an object called params. Let's also add an <h1> tag displaying the current product name.

<script>
  import { page } from '$app/stores';
</script>
 
<h1>Our Product name is: {$page.params.name}</h1>

Now, in our browser if we go to the path /product/cup, we will see that our page is displaying our dynamic parameter, name, which in this case is 'cup'. If we change the route to /product/sticker, the dynamic param will update to 'sticker'. Now we can use this name to dynamically set the pages data. Let's create an array of available products and use the dynamic parameter to dynamically update the value of product.

<script>
  import { page } from '$app/stores';
  let product;
  let products = [
    {
      name: 'Sticker',
      src: 'https://cdn.shopify.com/s/files/1/0434/0285/4564/products/Sticker-mock.png?v=1623256356',
      price: '$8.00',
      quantity: 1,
    },
    {
      name: 'Cup',
      src: 'https://cdn.shopify.com/s/files/1/0434/0285/4564/products/Cup-front-black.png?v=1623159405',
      price: '$10.00',
      quantity: 1,
    },
    {
      name: 'Jacket',
      src: 'https://cdn.shopify.com/s/files/1/0434/0285/4564/products/bomber-jacket-0.png?v=1622902777',
      price: '$80.00',
      quantity: 1,
    },
  ];
  $: {
    product = products.find((product) => product.name === $page.params.name);
  }
</script>
 
<h1>{product.name}</h1>
<div>Cost: {product.price}</div>
<img src="{product.src}" />

Now the value of product updates when we change the route, and we see this reflected in the pages contents! This is a pretty basic example, but dynamic parameters are very powerful. In the future, you may use this parameter to fetch data from a database or api.

That sums up SvelteKit's client based routing. In the next module we will learn about layouts.