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() { ``` - 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. -## Calling an action programmatically +## Calling an action programmatically If you don't want to use a `
` 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 ( + + + +
+ ); +} +```