Server Action: Throw Redirect

Server Action

Server Action: Throw Redirect

Server actions can throw a redirect to navigate users after a successful mutation. Throwing (instead of returning) allows you to redirect from anywhere—including helper functions or validation logic that wouldn't normally be able to return a Response.

When to Use Action Redirects

After creating a resource, redirect to its detail page
After logout, redirect to home or login page
Multi-step wizards: redirect to the next step
After deleting, redirect to a list page

Choose Redirect Destination

Server Action with Throw Redirect (redirect.ts)

import type { RouteActionArgs } from "@udibo/juniper";
import { redirect } from "react-router";

export async function action({ request }: RouteActionArgs): Promise<void> {
  const formData = await request.formData();
  const destination = formData.get("destination") as string;

  await new Promise((resolve) => setTimeout(resolve, 300));

  if (destination === "home") {
    throw redirect("/");
  }
  if (destination === "features") {
    throw redirect("/features");
  }

  throw redirect("/features/data/server-actions/redirect?success=true");
}

Note: Redirects after mutations follow the POST-Redirect-GET pattern, preventing duplicate form submissions if the user refreshes the page.