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')
}
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
}
}
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
Top comments (11)
Another thing you can do is
You're correct, they added support for this sometime after this article but I'll make sure to update it, thanks!
Do you have or anyone you know/recommend has a sveltekit bootcamp/course?
So I'm currently looking to move from my old blog, which has a filing structure like:
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:
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
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
?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:Then in the index file:
This worked perfectly for signing out a logged in user and redirecting them back to the homepage. Just needed to grab the
request
object fromget
and do some cookie magic. Thanks for the pattern!Is this caused by a bug in sveltekit or?
I mean, should i not work without the header?
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 yourload
responseWhat about doing this for going back to a previous page (history.back()) when a button is clicked..
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...