How to go back to the previous page using SvelteKit?

[asynched]

I'm building an app that requires a "back" button but I'm not sure what is the best way to do it.

In this Stack Overflow question it shows some examples on how to do it, but I'm not exactly sure. I'm currently using the browser native history.back function.

Any suggestions? Thanks in advance!

[Elliott-Green]

window.history.back();

[UrbaneD0ge]

Window is not defined.

[ramonmalcolm10]

If window is not defined that mean it’s been executed correctly on the server. You can use it inside the onMount function

[ntvs]

Code works because it should only ever be executed when the window already exists (when a button is clicked). If you want to specify that you want it to work only client side, maybe you can add a check for "browser"

//svelte
import { browser } from "$app/environment";

//functions
function nav_back() {
    if (browser) window.history.back();
}

However, in my case, it works without the check. Hope this helps.

[diegoulloao]

This will bypass the sveltekit navigation, let's say you're calling the preloadData function on mouseover, if you call window.history.back() after that, the application will lose the loaded data in background, it will reload the page from scratch, so this is not the right solution.

[diegoulloao]

Instead you can also use goto(document.referrer), specially for those cases when you need to preload data from server:

<script>
  import { preloadData, goto } from "$app/navigation"

  let backPathname = ""
  onMount(() => (backPathname = document.referrer))
</script>

<button
  on:click={() => goto(backPathname)}
  on:mouseover={async () => await preloadData(backPathname)}
>
  go back
</button>