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!

Thomas Hennes · Accepted Answer · 2024-06-20 23:20:29Z

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>

edited Jun 20, 2024 at 23:20

answered Jun 20, 2024 at 23:05

Thomas Hennes

10k3 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Creatz Over a year ago

Thank you very much for your feedback; it helped me a lot and allowed me to solve my problem. Thank you again for the promptness and the explanations.

Collectives™ on Stack Overflow

passing data between pages in SvelteKit using goto

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related