Browser back button shows correct url but not navigating

Question

I am using Svelte and Sveltekit. Currently we I am trying to implement support for queryparameters to store searchstates, paging and more.

This is how I create the queryparameters:

$: {
    const url = new URL(window.location.href);
    if (searchText.length > 0) {
        url.searchParams.set('search', searchText);
    } else {
        url.searchParams.delete('search');
    }

    if (currentHvacPage > 0) {
        url.searchParams.set('page', currentHvacPage.toString());
    } else {
        url.searchParams.delete('page');
    }

    if (tabs.find((tab) => tab.active)?.title != initalActiveTab) {
        const tabTitle = tabs.find((tab) => tab.active)?.title;
        url.searchParams.set('tab', tabTitle ? queryifyText(tabTitle) : '');
    } else {
        url.searchParams.delete('tab');
    }

    history.replaceState({}, '', url);
}

So this works and created the correct url's. I can take the resulting url and paste it into the browser and load the page with correct state.

However my problem is that if I navigate away from the page and then click the back button in the browser the correct url is showing but the page is not loading. Anyone have any clues what is missing?

Answer 1

You cannot modify the history directly, otherwise SvelteKit's router will not work as intended.

Use goto with the replaceState option.