How to redirect to page in SvelteKit?

Question

I have a page with content rendered from a SvelteKit store. If the store is invalid, a user needs do be redirected to the homepage. Unfortunately, I can't find a way to redirect a user even without checking any conditions, so let's focus on a simpler question: how to always redirect from somepage to homepage?

I have tried the following, none of this works for me:

• Using <script context="module"> before script tag on the page as follows:

<script context="module">
    export async function load() {
        return {
            status: 302,
            redirect: "/"
        };
    }
</script>

• Using PageLoad in +page.js file:

/** @type {import('./$types').PageLoad} */
export function load() {
    return {
        status: 302,
        redirect: '/'
    };
}

When I use the code mentioned above, the website works as if nothing was changed, I get no errors, but the redirection does not happen. If I get to the page unexpectedly (type it's address in the search bar, the store is not ready), I get redirected to the error page, because an error happens (which I want to prevent by homepage redirection). If I get to the page expectedly (the store is fine), the page gets rendered normally, no redirect happens.

Hamrick

Answer 1

See the SvelteKit Redirect docs.

import { redirect } from '@sveltejs/kit';
 
export function load() {
  // ...
  redirect(302, '/'); // needs `throw` in v1
}

On the page one would use goto.

Cenesthesia

Yes but what if I want to do it outside of the load function? Eg, in a +page.svelte file – Caceres

Note, for sveltekit 2.0 you can just use redirect(302, '/');, no need to throw anything anymore. – Pedraza

Answer 2

Based on the documentation page you would use goto(theurl). Example:

import { goto } from '$app/navigation';
// ...Your other imports
    
goto('/redirectpage');

Or if you prefer using native approach, then in file .svelte you would do this,

If you are not using SSR then this:

window.location.href = '/redirectpage';

Or if you are using SSR then this:

import { browser } from '$app/environment';
// ...Your other imports
    
if (browser) { // to prevent error window is not defined, because it's SSR
    window.location.href = '/redirectpage';
}

Olmos

Answer 3

To do it on the server, you put it in +page.server.ts:

// src/routes/page-to-redirect/+page.server.ts

import { redirect } from '@sveltejs/kit';

export function load() {
    throw redirect(302, '/redirect-to-this-url');
}

Furthermore

Note, for sveltekit 2.0 you can just use redirect(302, '/');, no need to throw anything anymore. – Pedraza