url is incorrect in `load` after pushState and navigation

200 views Asked by At

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

0

There are 0 answers