I have a SvelteKit 2.0 app where I'm trying to navigate from page1 (a kind of form) to page2 (the results). When doing so, I want to update the current url with search parameters, so that when the user goes back, the fields on page1 are filled in with the last request.
To do so, I use the new pushState function, followed by goto for the actual navigation.
page1.svelte
<script lang="ts">
import { goto, pushState } from '$app/navigation';
function submit() {
pushState('/page1?a=1', {});
goto('/page2?a=1');
}
</script>
<button on:click={() => submit()}>Lez go</button>
page1.ts
export function load({ url }) {
console.log(url.toString()); // PROBLEM HERE
const urlParams = url.searchParams.get('a');
return { urlParams };
}
Navigating from page1 to page2 works well, but things break when I try to go back using the browser "previous page". For example:
- I'm on /page1
- I push /page1?a=1
- I navigate to /page2?a=1
- I press "go back"
- The browser shows the correct url /page1?a=1 (meaning that the browser history was updated)
- The load function of page1 runs but the url is incorrect: /page1
There seems to be an inconsistency between the browser history and SvelteKit's routing history.
I also tried using the browser history API instead but it broke SvelteKit.
Thanks for your help :)
Here is a repo with a minimal reproduction: https://github.com/AlexisGado/bug-nav-svelte