SvelteKit: recover state after user 404

Question

How to make robust navigation on SvelteKit, to keep app state values when a 404 occurs if user cheats the browser URL bar ?

I have a complex navigation in my game app.

(EDIT 3: removed / simplified some paragraphs)

Real-world example is almost 30 pages !

I placed the game arena board compos directly in the layout so modal pages such as main-menu can be easily displayed; stacked on top of them.

I wrote a component "GotoView" and its associated store, with immediate (button) and scheduled (timer) navigation facilities.

I just fear about two bad use case:

mobile: accidental tap on "back navigation button"
desktop: manually rewriting URL bar (cheating)

...both could mess up the application state and produce crashes.

Is it possible to block back navigation simply, and, recover from a 404 pages ?

Regards.

EDIT:

Yes !

back-navigation: using goto(url, { replaceState: true }) and maybe invalidate from $app/navigation
Errors 404: if a real 404 occurs in a src/routes/game/arena/game-arena-splash/+page.svelte, the only way I know to capture the 404 is /src/routes/game/arena/+error.svelte, one level up

EDIT (2)

By the way I tried to nest deeper a erroneous link to emulate a cheating URL:

src/routes/
    +error.svelte
    +layout.svelte
    game/
       +error.svelte
       arena/
          +error.svelte
          /game-arena-splash
             +error.svelte
             +page.svelte

with this link in the nestiest page:

< a href = "/game/arena/this-is-404" > BOOM !!! </ a >

... but no way ! unable to catch the 404 until it bubbles to the root level (/src/routes) PLUS a layout reload, reducing to zero the chances of recover the 404... and losing stored data states !!!

I also tried beforeNavigate inside layouts ...

Should I consider using server, cookies or snapshots instead ?

Thanks for replies ! Enjoy coding.

SvelteKit: recover state after user 404

0 Answers0