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.
ContextI 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 doneSource 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 encounteredWhen 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 checkedFile Structure:src/routes/test/[value]/+page.svelte is correctly placed.The console shows Loaded value: undefined.
Additional InformationSvelteKit Version: 2.0.0
QuestionCould 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!