From 2da936fa52a7da41fb981f2a07194c015641463a Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 6 Jan 2025 12:11:11 +0330
Subject: [PATCH] Add redirect example

---
 .../guides/actions-and-mutations.mdx          | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/routes/solid-start/guides/actions-and-mutations.mdx b/src/routes/solid-start/guides/actions-and-mutations.mdx
index 7e804c499..b608ff90f 100644
--- a/src/routes/solid-start/guides/actions-and-mutations.mdx
+++ b/src/routes/solid-start/guides/actions-and-mutations.mdx
@@ -237,10 +237,13 @@ export default function Page() {
 ```
 
 <Callout type="info" title="Multiple Submissions">
-	If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive.
+	If you want to display optimistic UI for multiple concurrent submissions, you
+	can use the
+	[`useSubmissions`](/solid-router/reference/data-apis/use-submissions)
+	primitive.
 </Callout>
 
-## Calling an action programmatically 
+## Calling an action programmatically
 
 If you don't want to use a `<form>` element, you can use the `useAction` primitive to programmatically call an action:
 
@@ -270,3 +273,33 @@ export default function Page() {
 	);
 }
 ```
+
+## Redirecting
+
+If you would like to redirect the user to a different route after the completion of an action, you can use the `redirect` helper:
+
+1. Import `redirect` from `@solidjs/router`
+2. Call `redirect` with the route you want to navigate to and throw the response
+
+```tsx {10} title="src/routes/index.tsx"
+import { action, redirect } from "@solidjs/router";
+
+const addPost = action(async (formData: FormData) => {
+	const title = formData.get("title");
+	const response = await fetch("https://my-api.com/posts", {
+		method: "POST",
+		body: JSON.stringify({ title }),
+	});
+	const post = await response.json();
+	throw redirect(`/posts/${post.id}`);
+}, "addPost");
+
+export default function Page() {
+	return (
+		<form action={addPost} method="post">
+			<input name="title" />
+			<button>Add Post</button>
+		</form>
+	);
+}
+```