Is it possible to replaceState of a current page, and replace the url to another page of my project?

[oversanne]

Hello! Thanks for reading and supporting!

I'm trying to achieve the following, but I can't figure out how to do it. I've searched for similar topics, but haven't found anything particularly helpful—maybe I'm using the wrong keywords. Any help would be much appreciated!

I have 3 routes, with code like this:

/page/[id]/+page.svelte

Editing!

/page/new/+page.svelte

<script>
	import { goto, replaceState } from '$app/navigation';

	function update() {
		console.log("I'm creating a new one");
		replaceState('/page/super-id', {});
		goto('/byebye');
	}
</script>

<button on:click={() => update()}>Go to super-id</button>

/byebye/+page.svelte

Bye bye ! Go back now using your browser

When I'm on the new page, saving a form, I'm generating a UUID, and I would like to replace the current state/URL so that when the user goes back, they land on the [id] page instead of the new page.

However, when I navigate from new to the byebye page and then go back in my browser (Chrome), I notice that the browser's URL is correctly updated (which is great), but... Inside Svelte I'm still on the new page, not the [id] page. If I refresh the browser, I land on the [id] page correctly.

So... I'm not sure how to handle this. Maybe I misunderstood something, or I'm using a bad practice here. Can you please help me?

Thank you!