Skip to content

Commit

Permalink
Add redirect example
Browse files Browse the repository at this point in the history
  • Loading branch information
amirhhashemi committed Jan 6, 2025
1 parent 6b22987 commit 2da936f
Showing 1 changed file with 35 additions and 2 deletions.
37 changes: 35 additions & 2 deletions src/routes/solid-start/guides/actions-and-mutations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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>
);
}
```

0 comments on commit 2da936f

Please sign in to comment.