react-router-7 , example

test1.tsx

import type { Route } from "./+types/home";
import { Form , useSubmit } from "react-router";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}
export async function loader({ params }: Route.LoaderArgs) {
  return { todos: []};
}

export async function action({
  request,
}: Route.ActionArgs) {
  let formData = await request.formData();
  let title = await formData.get("title");
  const input = {
    title: title
  }
  console.log(input);
  return {data : input };
}

export default function Product({
    loaderData,
    actionData,
}: Route.ComponentProps) {
  let submit = useSubmit();
  const data = loaderData;
  console.log(data);
  console.log(actionData);

  return (
  <>test1
  <hr />
    <form method="post" onSubmit={(e) => {
        e.preventDefault();
        const sendFormData = new FormData(e.currentTarget);
        submit(sendFormData, { method: "post" });
      }}>
        <div>
          <span htmlFor="title">タイトル</span>
          <input
            id="title"
            name="title"
            defaultValue=""
          />
          <button type="submit">Save</button>
        </div>
        <hr />
    </form>
  </>

  );
}