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>

[u-m-i]

This is very useful but, how can we check if the referrer belongs to the session?

[u-m-i]

Do not use window.history.back() or

goto(document.referrer) [...] @diegoulloao

without an extra check.

Why? Let's say you open a new tab, enter the URL to navigate to your app right at the page where you use window.history.back(). Once in the page the event listener you settled up triggers and, where are we? Again at the new tab. Do an extra check with the beforeNavigation, where navigation.to is null if to where we are going does not belong to the app, if that is the case, use pushState to the default place or anything under the app.

import { beforeNavigation, pushState } from "$app/navigation";

beforeNavigation( (navigation) => { 
  if(!navigation.to){
    /* You can add options for modifying the page.state value for the next page */
    pushState("/", {});
  }
});