passing data between pages in SvelteKit using goto

Question

I'm working on a SvelteKit project where I'm trying to pass data between two pages using the goto function. Unfortunately, I'm encountering issues and can't seem to get it to work correctly.

Context I want to pass a fixed value ("TOTO") from one page to another to verify that data transmission works correctly before moving on to implementing it with dynamic data (such as an image ID).

What I've done Source Page (Gallery.svelte) :

<script>
    import { goto } from '$app/navigation';

    const handleClick = () => {
        console.log('Navigating to test value');
        goto('/test/TOTO');
    };
</script>

<div>
    <button on:click={handleClick}>Go to Test Value</button>
</div>

Destination Page (src/routes/test/[value]/+page.svelte) :

<script context="module">
    export async function load({ params }) {
        const { value } = params;
        return {
            props: { value }
        };
    }
</script>

<script>
    export let value;
    console.log('Loaded value:', value);
</script>

<div class="value-display">
    <h1>Passed Value:</h1>
    <p>{value}</p>
</div>

Problem encountered When I click on the "Go to Test Value" button in Gallery.svelte, I'm redirected to the /test/TOTO page, but the passed value (value) is undefined.

What I've checked File Structure: src/routes/test/[value]/+page.svelte is correctly placed. The console shows Loaded value: undefined.

Additional Information SvelteKit Version: 2.0.0

Question Could someone help me understand why the value passed via goto is undefined and how to fix it? Any help would be greatly appreciated!

Thank you in advance for your assistance!

Answer 1

Since SvelteKit 1.0+, loading page data is no longer done through a <script context="module"> section but through a companion +page.js (or +page.ts if you are using Typescript), as explained in the relevant documentation.

You can further specify that this mechanism should only run server-side by locating your load function inside +page.server.js (or, again, .ts) instead.

In your particular case:

// src/routes/test/[value]/+page.js

export const load = ({ params }) => {
    const { value } = params;
    return {  // the 'props' property is no longer necessary
        value
    };
};

and

// src/routes/test/[value]/+page.svelte

<script>
    export let data; // will contain the object returned by the load function
    console.log('Loaded value:', data.value);
</script>

<div class="value-display">
    <h1>Passed Value:</h1>
    <p>{data.value}</p>
</div>

Side note: in your gallery page, you really should use dynamically generated links (using string extrapolation, for example) to navigate rather than through a button handler that subsequently calls a goto action, e.g.:

<script>
    const id = 'TOTO';
</script>

<div>
    <a href={`/test/${id}`}>Go to Test Value</a>
</div>