Actions & Forms
Data mutations are handled via
action functions and HTML Forms.The Action Function
Export an
action to handle POST, PUT, DELETE requests.tsx
1import { redirect } from "react-router";
2
3export async function action({ request }) {
4 const formData = await request.formData();
5 const title = formData.get("title");
6
7 await db.createPost({ title });
8 return redirect("/dashboard");
9}The Form Component
Use the
<Form> component to submit data without a full page reload.tsx
1import { Form } from "react-router";
2
3export default function NewPost() {
4 return (
5 <Form method="post">
6 <input name="title" />
7 <button type="submit">Create</button>
8 </Form>
9 );
10}