I hate two routes in my SvelteKit app, /a and /b. The first route can conditionally redirect to the second when loading:
// src/routes/a/+page.server.ts
export async function load({ url }) {
// some check, irrelevant to question
if (Math.random() < 0.5) {
redirect(301, `/b`);
} else {
return;
}
}
On the second route, I would like to know if the page was requested as a result of that redirect, or navigated to directly (i.e. by user pasting the URL into the address bar) -- if it's a redirect, I'd like to show something slightly different on the page itself.
// src/routes/b/+page.server.ts
export async function load({ url }) {
// Here, I'd like to know if this is a direct navigation or a redirect
const isRedirectFromRouteA: boolean = /* ??? */;
return {
// Depending on this, +page.svelte shows something different
showExtraInfo: isRedirectFromRouteA
};
}
Is there a way to achieve this?
I hate two routes in my SvelteKit app, /a and /b. The first route can conditionally redirect to the second when loading:
// src/routes/a/+page.server.ts
export async function load({ url }) {
// some check, irrelevant to question
if (Math.random() < 0.5) {
redirect(301, `/b`);
} else {
return;
}
}
On the second route, I would like to know if the page was requested as a result of that redirect, or navigated to directly (i.e. by user pasting the URL into the address bar) -- if it's a redirect, I'd like to show something slightly different on the page itself.
// src/routes/b/+page.server.ts
export async function load({ url }) {
// Here, I'd like to know if this is a direct navigation or a redirect
const isRedirectFromRouteA: boolean = /* ??? */;
return {
// Depending on this, +page.svelte shows something different
showExtraInfo: isRedirectFromRouteA
};
}
Is there a way to achieve this?
Share Improve this question asked Feb 17 at 16:09 goose_lakegoose_lake 1,4808 silver badges24 bronze badges 2- AFAIK If the redirect happens within the application (does not trigger reload), you can save the origin to a state variable and read it on the second page after redirect. – Mikko Ohtamaa Commented Feb 17 at 18:36
- @MikkoOhtamaa: Redirects are responses to the client and the client decides what to do with that. Also, setting state variables on the server is generally a very bad idea. it easily leads to data leaking between different users. (If you store session state in some kind of dictionary indexed via a user session cookie that would be fine.) – brunnerh Commented Feb 17 at 19:28
1 Answer
Reset to default 1One way would be to set a cookie temporarily.
// in /a
export async function load({ cookies }) {
cookies.set('redirect-from-route', '/a', { path: '/' });
redirect(302, `/b`);
}
// in /b
export async function load({ cookies }) {
const fromRoute = cookies.get('redirect-from-route');
if (fromRoute != null)
cookies.delete('redirect-from-route', { path: '/' });
if (fromRoute == '/a')
// ...
}
Another would be to set a query parameter in the redirect URL, though that will be visible and removing it would involve another redirect or a history state replacement.
301 (Moved Permanently) is possibly not the best status code here. It will lead to caching of the redirect in the browser which prevents attaching additional information upon subsequent requests, so the cookie will not exist.