Redirect from actions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens after a successful redirect in a SvelteKit action?

Consider a SvelteKit form action that returns a redirect. What will the user see immediately after the form submission?

Svelte

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

export const actions = {
  default: async ({ request }) => {
    // some processing
    throw redirect(303, '/success');
  }
};

A The form data is displayed on the same page without navigation.

B An error message is shown because redirect is not supported.

C The page reloads but stays on the current URL.

D The browser navigates to the '/success' page immediately.

💡 Hint

Think about what a redirect response does in a web app.

Returning a redirect from an action causes the browser to navigate to the specified URL immediately after the form submission.

📝 Syntax

intermediate

Which is the correct way to return a redirect from a SvelteKit action?

Choose the valid syntax to redirect the user to '/dashboard' after an action completes.

A return { redirect: '/dashboard' };

B throw redirect(303, '/dashboard');

C return { status: 303, redirect: '/dashboard' };

D return { status: 303, headers: { Location: '/dashboard' } };

💡 Hint

Check the SvelteKit documentation for the redirect helper function.

SvelteKit provides a redirect function to throw a redirect response with status and location. Returning an object with redirect key is not valid.

🔧 Debug

advanced

Why does this SvelteKit action not redirect as expected?

Given this action code, the user is not redirected after form submission. What is the cause?

Svelte

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

export const actions = {
  default: async ({ request }) => {
    // some logic
    throw redirect(303, '/home');
  }
};

A The action should throw the redirect instead of returning it.

B The redirect URL must be absolute, not relative.

C The redirect function is not imported correctly.

D The action must return a status code with the redirect.

💡 Hint

Think about how SvelteKit expects redirects to be handled in actions.

In SvelteKit, to redirect from an action you must throw the redirect helper, not return an object with a redirect key.

❓ state_output

advanced

What is the state of the page after throwing a redirect in an action?

When an action throws redirect(303, '/profile'), what happens to the current page's state and data?

A The action returns data to update the current page without navigation.

B The current page state is preserved and the URL changes to '/profile'.

C The current page state is discarded and the browser navigates to '/profile'.

D The page reloads but stays on the same URL with updated data.

💡 Hint

Consider what a redirect response does in HTTP.

Throwing a redirect causes the browser to navigate away, so the current page state is lost and replaced by the new page.

🧠 Conceptual

expert

Why use throw redirect() instead of return in SvelteKit actions?

Explain why SvelteKit requires throwing redirect() in actions instead of returning an object with redirect info.

A Throwing interrupts the action and sends a special HTTP response to the browser immediately.

B Returning redirect info would cause the action to run twice, causing errors.

C Throwing redirect() allows SvelteKit to cache the redirect response for performance.

D Returning redirect info is deprecated and no longer supported in SvelteKit.

💡 Hint

Think about how exceptions control flow in JavaScript and HTTP responses.

Throwing redirect() immediately stops the action and sends a redirect HTTP response to the browser. Returning an object would not interrupt the flow properly.