SvelteKit Navigation goto State

Question

In SvelteKit navigation goto allows to pass state in the second argument such as:

import { goto } from '$app/navigation';

// ...

goto('/login', { state: { foo: 'bar' } });

The documents do not make it clear how state can be consumed/retrieved after the resulting navigation has occurred. state does not seem to be present on $page nor seems to be available on $navigating.

How do you consume state passed to second argument of goto()? Is it currently missing and you have to create your own writable store to manage this state?

This is an adapter-static SvelteKit application.

Answer 1

The state being referred to is the one held on the history stack of your browser tab or window.

You can access it in two different ways:

• directly by reading the value of history.state, although not very useful in practice as it returns the value of the state at the top of the history stack only
• by listening to popstate events, which will fire when the history stack is 'popped' (ex.: hitting back button on your browser or navigating programatically), in which case the state will be a property on the synthetic event object passed to the listener when the event fires