How to Navigate in SvelteKit with 'redirect' and 'goto'

Navigating between routes programmatically is a common requirement in applications. SvelteKit provides two primary methods for this purpose: redirect and goto. In this guide, you'll learn how to use these methods effectively.

Using redirect

The redirect function is used for server-side navigation, such as during form submission or in endpoint handlers, and can be used within load functions, form actions, API routes, and the handle hook.

The redirect function must include a status code as a function argument. Common status codes include:

• 303 — for form actions, following a successful submission.
• 307 — for temporary redirects.
• 308 — for permanent redirects.

Code Example

This example is a SvelteKit server-side action that handles form data (email) and redirects the user to a different page (/auth/verify).

// +page.server.ts
import { redirect } from '@sveltejs/kit';

export const actions = {
	default: async ({ request }) => {
		// Form data
		const data = await request.formData();
		const email = data.get('email') as string;

		// Validate email & send One Time Passcode...

		// Redirect to verify page
		throw redirect(303, '/auth/verify');
	}
};

When to use redirect

• Use redirect when the navigation depends on server-side logic or after processing a form submission.
• It is helpful in situations where the redirection is conditional based on server-side data.

Using goto

The goto function is used for client-side navigation. It is ideal for SPA (Single Page Application) behaviors where you want to navigate without reloading the page.

Code Examples

Call the goto function to navigate to a new route. This can be triggered by events such as button clicks:

<!-- +page.svelte -->
<script lang="ts">
  import { goto } from '$app/navigation';

  function handleNavigation() {
    goto('/new-route');
  }
</script>

<button on:click={handleNavigation}>Go to New Route</button>

The goto function can also accept additional options, such as parameters and replace state.

• replaceState: If true, it replaces the current history entry instead of creating a new one (i.e. prevents the user from navigating back to the previous page).
• noscroll: If true, it prevents scrolling to the top of the page after navigation.

<!-- +page.svelte -->
<script lang="ts">
  import { goto } from '$app/navigation';

  function handleNavigation() {
    goto('/new-route', { replaceState: true, noScroll: true });
  }
</script>

<button on:click={handleNavigation}>Go to New Route</button>

When to use goto

• Use goto for client-side navigation where you want a seamless user experience without a full page reload.
• It is ideal for navigation triggered by user interactions like button clicks, links, or other events.

Summary

Navigating programmatically in SvelteKit can be done using either redirect for server-side navigation or goto for client-side navigation.

• Use redirect for server-side logic and form submissions.
• Use goto for client-side interactions and SPA behaviors.

That's it! Happy coding.