Skip to content
RoutingView the code for this module.

SvelteKit includes a filesystem-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 index.svelte file and __layout.svelte file. Our index 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. Let's name it products.svelte and paste in some code to display different products on this page. Now, if we go back to our browser and go to the route /products, we will see our products page is being displayed.

As we can see, the file name determines the route. If we change the name of our file from 'products' to 'shop', we see there is no longer a page at /products and instead it lives at /shop. Notice that this is not the case for our index.svelte page. This page does not live at /index because whichever file is named index.svelte will automatically be the root of our site.

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 routes folder called 'product'. Now, let's add a product page within this folder called cup.svlete and add some code to display our cup product info. Now, if we go to our browser and view the page at the route /product/cup, we will see our cup.svelte page is being displayed.

We can add as many pages as we want within this folder and they will all be a sub-route of /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 a new page within it called t-shirt.svelte, we will see this page displayed at the route /product/appearal/t-shirt.

One thing you may be wondering is how we can add a root page for when we land at the path /product. We can create a root page by adding an index.svelte file within the folder. Every folder within our routes folder can have an index.svelte page that will be the root page for that route. For instance, adding an index.svelte file within our product folder will create a route for the folder name. Now, if we go to /product in our browser, our index.svelte page is being displayed.

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.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].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.