Skip to content

JS/SevelteKit

sveltekit params object

Author
siwon
Date
2024-01-10 15:39
Views
409

In SvelteKit, the `params` object is often used in the context of routing. When defining routes in SvelteKit, you can include parameters in the route's path, and these parameters can be accessed through the `params` object in components associated with those routes.


Here's a brief overview of how `params` work in SvelteKit:


1. **Defining Routes with Parameters:**

   When defining a route in the `src/routes` directory, you can include parameters in the route's file name, enclosed in square brackets. For example:


   ```plaintext

   src/routes/blog/[slug].svelte

   ```


   In this example, the `[slug]` part indicates that the route expects a parameter named `slug`.


2. **Accessing Parameters in Components:**

   In the associated Svelte component (`[slug].svelte`), you can access the parameters through the `params` object. For example:


   ```svelte

   <!-- src/routes/blog/[slug].svelte -->
   <script context="module" lang="ts">
     // TypeScript: Import the types
     import type { Load } from '@sveltejs/kit';
     // Define the `load` function
     export const load: Load = async ({ params }) => {
       const { slug } = params;
       // Fetch data or perform any logic based on the `slug` parameter
       return { props: { slug } };
     };
   </script>
   <script lang="ts">
     // TypeScript: Define the component logic
     export let slug;
   </script>
   <h1>{slug}</h1>

   ```


   In the `load` function, `params` is used to extract the `slug` parameter. The `props` object is then returned with the extracted data, making it available to the component.


3. **Dynamic Route Navigation:**

   You can use the `link` SvelteKit action to dynamically generate links to routes with parameters. For example:


   ```svelte

   <!-- src/routes/index.svelte -->
   <script>
     import { link } from '$app/navigation';
     const navigateToBlog = () => {
       const slug = 'example-slug';
       // Navigate to the blog post with the specified slug
       link(`/blog/${slug}`);
     };
   </script>
   <button on:click={navigateToBlog}>Go to Blog Post</button>

   ```


   The `link` action helps generate links dynamically, and you can pass parameters to construct the appropriate route.


In summary, `params` in SvelteKit are a way to work with route parameters, making it easy to create dynamic routes and handle data based on those parameters in your components.

In SvelteKit, the `params` object is not global. Instead, it is part of the context passed to the `load` function and is specific to the current route/component. The `params` object contains information about the parameters specified in the route's path, making it easy to access and work with them in the component associated with that route.


Here is an example to illustrate how `params` is used in a SvelteKit component:


```svelte

<!-- src/routes/blog/[slug].svelte -->
<script context="module" lang="ts">
  // TypeScript: Import the types
  import type { Load } from '@sveltejs/kit';
  // Define the `load` function
  export const load: Load = async ({ params }) => {
    const { slug } = params;
    // Fetch data or perform any logic based on the `slug` parameter
    return { props: { slug } };
  };
</script>
<script lang="ts">
  // TypeScript: Define the component logic
  export let slug;
</script>
<h1>{slug}</h1>

```


In this example, the `params` object is accessed within the `load` function, and the `slug` parameter is extracted from it. The `props` object is then returned, making the `slug` available to the component for rendering.

It's important to note that the `params` object is scoped to the specific route/component where it is being used. If you have multiple routes with different parameters, each route/component will have its own `params` object reflecting the parameters relevant to that specific route. This encapsulation ensures that route-specific information is appropriately handled within the corresponding components.