TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published



  • You need to use the goto function exported by sapper-navigation-enhancer instead of the goto function exported by Sapper.
  • You need to use the redirect function exported by sapper-navigation-enhancer instead of Sappers this.redirect in your preload functions.


npm install sapper-navigation-enhancer



import { start } from '@sapper/app';
import beforeStart from 'sapper-navigation-enhancer';

const afterStart = beforeStart(['/'], true);
start({ target: document.querySelector('#app') });


  import { goto, stores } from '@sapper/app';
  import { init } from 'sapper-navigation-enhancer';

  const { page } = stores();

  init(page, goto);



function back(fallback: string | () => string): void;

If canGoBack() returns true, navigates to the previous history entry (like history.back()).
If canGoBack() returns false, navigates to the fallback url. It will do so by prepending a history entry with the fallback url before the current history entry and then navigates back.


type Callback = (href: string) => false | Promise<false | any> | any;
type Unsubscribe = () => void;
function beforeNavigate(callback: Callback, useBeforeUnload: boolean = false): Unsubscribe;

Subscribe to navigation attempts. Navigation will be prevented, when you return false or Promise<false>.

If useBeforeUnload (or alwaysUseBeforeUnload in beforeStart) is true, a onbeforeunload listener will be created.
Returns an Unsubscribe function, which must be called when the component is destroyed.

<!-- some-route-or-component.svelte -->
  import { beforeNavigate } from 'sapper-navigation-enhancer';
  import { onMount } from 'svelte';

  onMount(() => beforeNavigate(href => confirm(`Do you want to navigate to ${href}?`)));


type AfterStart = () => void;
function beforeStart(startPaths?: string[], alwaysUseBeforeUnload: boolean = false): AfterStart;

You need to call this function before you call Sappers start function and you need to call the returned AfterStart function after you call Sappers start function. Typically in the client.js.

If you provide the startPaths parameter and the current location.pathname does not match any of them, it will prepend a history entry - with the first item of startPaths array as the url - before the current history entry.
If alwaysUseBeforeUnload is true, a onbeforeunload listener will be created when calling beforeNavigate or preventNavigation.

This is the default exported function also, see Initialization.


function canGoBack(): boolean;

Returns true if the previous history entry is from your app.

At the same time, canGoBack is a readable store.

<!-- some-component.svelte -->
  import { back, canGoBack } from 'sapper-navigation-enhancer';

{#if $canGoBack}
  <button on:click={() => back('/')}>Go back</button>


function goto(
  href: string,
  opts: {
    force?: boolean;
    noscroll?: boolean;
    replaceStart?: boolean;
    state?: Record<string, any>;
  } = {}
): Promise<void>;

You need to use this function instead of Sappers goto function.

If opts.force is true, no beforeNavigate callback will be called.
If you called preventNavigation, opts.force has no effect.

With opts.state you can set history.state properties for the next history entry.

<!-- some-component.svelte -->
-  import { goto } from '@sapper/app';
+  import { goto } from 'sapper-navigation-enhancer';

<button on:click={() => goto('/')}>Home</button>


import type { PageContext } from '@sapper/common';
import type { Readable } from 'svelte/store';
type Goto = typeof import('@sapper/app').goto;
function init(page: Readable<PageContext>, goto: Goto): void;

You need to call this in your root layout component, see Initialization.


type RemovePrevention = () => void;
function preventNavigation(useBeforeUnload: boolean = false): RemovePrevention;

Prevents navigation. Returns a function that stops the prevention when called.

If useBeforeUnload (or alwaysUseBeforeUnload in beforeStart) is true, a onbeforeunload listener will be created.

<!-- some-component.svelte -->
  import { preventNavigation } from 'sapper-navigation-enhancer';

  let preventing;
  function togglePrevention() {
    if (preventing) {
      preventing = null;
    } else {
      preventing = preventNavigation();

<button on:click={togglePrevention}>Toggle navigation prevention</button>


import type { PreloadContext } from '@sapper/common';
function redirect(preloadContext: PreloadContext, statusCode: number, location: string): void;

You need to use this function instead of Sappers this.redirect() inside your preload functions.

<!-- some-route-or-layout.svelte -->
<script context="module">
+  import { redirect } from 'sapper-navigation-enhancer';

  export function preload() {
-    this.redirect(302, '/');
+    redirect(this, 302, '/');


function state(state: Record<string, any>): void;

Update the history.state of the current history entry.


npm i sapper-navigation-enhancer

DownloadsWeekly Downloads






Unpacked Size

286 kB

Total Files


Last publish


  • pehgeh