DEV Community

Cover image for How to redirect in SvelteKit endpoints
Dana Woodman
Dana Woodman

Posted on • Updated on

How to redirect in SvelteKit endpoints

#svelte #sveltekit #webdev #javascript

UPDATED April 7, 2023

SvelteKit now supports using redirect to throw redirect(301, '/some-age') as a convenience.

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

export async function GET() {
  // Do some magic here... ✨

  throw redirect(302, '/success')
}
Enter fullscreen mode Exit fullscreen mode

Thanks Brian in the comments for the reminder about this change 🙏

Wanted to do redirects in your SvelteKit endpoints and tried to return { redirect: '/success' } just to find out it doesn't work?

Well, you're in luck because you can just use the standard Location header to do redirects:

export async function GET() {

  // Do some magic here... ✨

  return {
    headers: { Location: '/success' },
    status: 302
  }
}
Enter fullscreen mode Exit fullscreen mode

Remember to make sure use the proper status code for your redirect.

Learn more about the Location header on MDN.

Whelp, that's it for today, hope this saved you some headaches!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content

Oldest comments (11)

Collapse
 
alexbjorlig profile image
Alex Bjørlig •

Is this caused by a bug in sveltekit or?
I mean, should i not work without the header?

Collapse
 
danawoodman profile image
Dana Woodman •

What do you mean a bug? Redirect headers are standard HTTP, routes (e.g. Svelte route files) do this for you if you pass a redirect property in your load response

Collapse
 
spences10 profile image
Scott Spence • • Edited

So I'm currently looking to move from my old blog, which has a filing structure like:

content/posts/2021/06/some-post-title/index.mdx
Enter fullscreen mode Exit fullscreen mode

In my blog currently that will be mydomain.com/2021/06/some-post-title

I'm looking to move to SvelteKit and use MDSveX and with Vite and the routing doesn't allow that (which I have found, and I've looked, like, a lot) so I'm looking to simplify the routes to something like:

src/routes/posts/some-post-title.svx
Enter fullscreen mode Exit fullscreen mode

How would I structure the redirects so that I'm not creating a path for each of the existing routes (130 odd)?

Do you have an example or some source code I could check out?

Thanks

Collapse
 
danawoodman profile image
Dana Woodman •

You've added MDSvex with this adder? github.com/svelte-add/mdsvex

And you can't create a file like this src/routes/posts/2021/06/some-post-title/index.svx and then navigate to /posts/2021/06/some-post-title?

Collapse
 
spences10 profile image
Scott Spence •

Thanks to @askrodney who helped me work this out...

For anyone else that has the same specific issue as me, make a file structure that mirrors the old filing structure, this is in the src/routes folder:

file structure

Then in the index file:

<!-- 
  Redirects from my old blog filing structure yyyy/mm/dd/post-title
  to posts/post-title thanks to rodneylab for the example 👇
  https://github.com/rodneylab/sveltekit-blog-mdx/blob/dev__redirect/src/routes/%5Byear%5D/%5Bmonth%5D/%5Bday%5D/%5Bslug%5D/index.svelte
 -->
<script context="module">
  export async function load({ page }) {
    const { slug } = page.params
    return {
      status: 301,
      redirect: `/posts/${slug}`,
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
delanyoyoko profile image
delanyo agbenyo •

What about doing this for going back to a previous page (history.back()) when a button is clicked..

Collapse
 
danawoodman profile image
Dana Woodman •

This article was about doing server-side redirects.

For a client redirect, you could use history.back() or perhaps have a look at the navigation functions: kit.svelte.dev/docs#modules-$app-n...

Collapse
 
vhs profile image
vhs •

This worked perfectly for signing out a logged in user and redirecting them back to the homepage. Just needed to grab the request object from get and do some cookie magic. Thanks for the pattern!

Collapse
 
bbarbour profile image
Brian Barbour • • Edited

Another thing you can do is

import { redirect } from "@sveltejs/kit";
throw redirect(303, '/');
Enter fullscreen mode Exit fullscreen mode
Collapse
 
danawoodman profile image
Dana Woodman •

You're correct, they added support for this sometime after this article but I'll make sure to update it, thanks!

Collapse
 
skit profile image
jj_skit •

Do you have or anyone you know/recommend has a sveltekit bootcamp/course?

Read next

vas_liubov profile image

Git and GitHub - First experience and Crib

Liubov Vas -

ticha profile image

How to add two numbers in JavaScript without using the "+" operator?

Ticha Godwill Nji -

dev_dcpushpa profile image

Step-by-Step Angular 17 & .NET 8: Build a Secure Auth App (FREE Course)

Pushpa Raj Dangi -

adityaoberai profile image

Social media authentication: convenience vs privacy

Aditya Oberai -