How to route programmatically in SvelteKit?

Question

I want to be able manage history of my SvelteKit app while simultaneously making sure the whole routing system of SvelteKit doesn't get affected in any way.

Something like:

function routeToPage(route: string) {
   router.push(`/${route}`) // equivalent of this function
}

Answer 1

Answering my own question thanks to Theo from SvelteKit Discord:

Use $$app-navigation

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

function routeToPage(route: string, replaceState: boolean) {
   goto(`/${route}`, { replaceState }) 
}

replaceState == true will replace the route instead of adding to the browser history. So, when you click back, you will not go back to the route you came from.

To go back use History API .

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

function goBack(defaultRoute = '/home') {
  const ref = document.referrer;
  goto(ref.length > 0 ? ref : defaultRoute)
}

Answer 2

You can programmatically navigate to a route in Svelte-Kit using the goto function . The most simple implementation would be something like this:

<script> 
  import { goto } from '$app/navigation';
  goto("/route")
</script>

But you can use more advanced options with it as well, which would be passed as a second argument with the target route.

Answer 3

It may be not exactly what you're searching for, but I think it worth mentioning that can make use of the beforeNavigate callback provided by $app/navigation .

then, you can save the nav history in a store to use it across your application in order to manage some special cases.

/routes/__layout.svelte

<script>
$: console.log($previousPage, $nextPage);

import { beforeNavigate } from "$app/navigation";
    beforeNavigate(({ from, to }) => {
    $history = [to.pathname, ...$history];
});
</script>

{#if $history}
  <ul>
    {#each $history as url}
      <li>{url}</li>
    {/each}
  </ul>
{/if history}

side note: from & to are URL Objects from the Web API: https://developer.mozilla.org/en-US/docs/Web/API/URL

/routes/stores.svelte

import { writable } from 'svelte/store';

export const history = writable(['/']);

Here's a demo based on the SvelteKit Demo app:

https://stackblitz.com/edit/sveltejs-kit-template-default-wivfds?file=src%2Froutes%2Fstores.js&terminal=dev

Answer 4

import { goto } from '$app/navigation';
function routeToPage(route: string) {
goto(route)
}