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
}

score 69 · Answer 1 · edited May 10 '22 at 22:00

69

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

edited May 10 '22 at 22:00

Roman Mahotskyi

4,576
5
35
68

answered Jun 30 '21 at 02:19

Himujjal

1,581
1
14
16

1

where does `reflength` variable come from? – laszlo Sep 10 '21 at 10:35
And also where/how would you use `goBack()`? – monsto Sep 13 '21 at 21:30
`reflength` is missing the dot operator: `ref.length` – edfonseca Oct 02 '21 at 21:13
This doesn't work, not explanatory enough – Bitfinicon Oct 22 '21 at 07:03
this doesn't work on server, i need to check if server mode and just ignore. seems nothing works on ssr really. – chovy Dec 08 '21 at 07:52
`state` can be used to modify the history: `goto(\`/${route}\`, {state: \`/${route}\`});` If you want to override the current history entry, use replaceState:true – Malo Marrec Dec 20 '21 at 16:53

score 32 · Answer 2 · answered Jun 30 '21 at 02:16

32

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.

answered Jun 30 '21 at 02:16

Theo テオ

565
3
5

7

`Cannot call goto(...) on the server` – ecstrema Sep 24 '21 at 05:24
1

This doesn't work properly. Problems occur with page refresh: Cannot call goto(...) on the server – Bitfinicon Oct 22 '21 at 06:59
On the server you should redirect in an endpoint – Theo テオ Oct 23 '21 at 06:47
@Theoテオ what do you mean that? can you pls share an example – seemcat Nov 04 '21 at 21:31
1

@seemcat An example would be to big for a comment, but here's the documentation for an endpoint https://kit.svelte.dev/docs#routing-endpoints – Theo テオ Nov 15 '21 at 02:46
1

Please post example. Also getting server error. – chovy Jan 04 '22 at 21:32
Hope it helps :3 https://github.com/sveltejs/kit/discussions/3245 – Soo Xiao Tong Jan 10 '22 at 08:44
You can do something like this: `import {browser} from "$app/environment"; if (browser) goto("/route"); You do have to import the goto function as well – Fighter178 Jan 25 '23 at 03:29
Alternative to `browser`: `onMount(() => { goto('/route'); });` – sleighty Mar 06 '23 at 17:36

score 5 · Answer 3 · edited Oct 21 '22 at 01:43

5

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

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

edited Oct 21 '22 at 01:43

Jonathan

3,893
5
46
77

answered Jun 30 '22 at 23:58

jugurtha moad

304
3
5

Big_Boulard · Answer 4 · 2022-02-24T16:15:52.890

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

edited Feb 24 '22 at 16:15

answered Feb 24 '22 at 14:59

Big_Boulard

799
1
13
28

The demo crashes with error: Error: Failed to load data at Renderer._load (https://sveltejskittemplatedefaultwivfds-gpaa--3000.local-corp.webcontainer.io/@fs/home/projects/sveltejs-kit-template-default-wivfds/.svelte-kit/runtime/client/start.js:1355:16) at async Renderer._get_navigation_result (https://sveltejskittemplatedefaultwivfds-gpaa--3000.local-corp.webcontainer.io/@fs/home/projects/sveltejs-kit-template-default-wivfds/.svelte-kit/runtime/client/start.js:1058:19) – Pick Avana Jan 19 '23 at 14:35
It really rough and ready but it's the `todos` page that is returning an error, not crashing. I've just removed the api part so you can test it out once again – Big_Boulard Jan 19 '23 at 17:13

How to route programmatically in SvelteKit?

4 Answers4

Linked