CODEWITHSUNDEEP
sveltesvelte-3sveltekit
Himujjal
Himujjal

Reputation: 2127

How to route programmatically in SvelteKit?

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
}

Upvotes: 60

Views: 61067

Answers (4)

Himujjal
Himujjal

Reputation: 2127

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)
}

Upvotes: 95

jugurtha moad
jugurtha moad

Reputation: 414

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

function routeToPage(route: string) {
  goto(route);
}

Upvotes: 7

Big_Boulard
Big_Boulard

Reputation: 1335

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

Upvotes: 3

Theo テオ
Theo テオ

Reputation: 625

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.

Upvotes: 38

Related Questions