React Routerのアクションで、フォームの送信を受け取る方法

import { createRoot } from 'react-dom/client';
import { createBrowserRouter } from 'react-router';
import { RouterProvider } from 'react-router/dom';

const router = createBrowserRouter([
  {
    path: '/',
    loader: rootLoader,
    Component: Root,
    HydrateFallback: Loading,
    children: [
      { index: true, Component: Home },
      { path: 'new', action: newCatAction, Component: NewCat },
    ],
  },
]);

createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

import { Form } from 'react-router';

export function NewCat() {
  return (
    <Form method="post">
      <label>
        名前 <input name="name" />
      </label>
      <label>
        毛の色
        <select name="color">
          <option>三毛</option>
          <option>黒</option>
          <option>白</option>
        </select>
      </label>
      <button type="submit">登録する</button>
    </Form>
  );
}

import { type ActionFunctionArgs } from 'react-router';

export async function newCatAction({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const name = String(formData.get('name') ?? '').trim();
  const color = String(formData.get('color') ?? '');
  // ここで入力を確かめて、保存する（次の節で書き足します）
}

  440ms newCatAction: 開始（method=POST）
  444ms newCatAction: formData = {"name":"しろ","color":"白"}

import { data, redirect, type ActionFunctionArgs } from 'react-router';

export async function newCatAction({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const name = String(formData.get('name') ?? '').trim();
  const color = String(formData.get('color') ?? '');

  const errors: { name?: string } = {};
  if (name === '') errors.name = '名前を入れてください';
  else if (name.length > 10) errors.name = '名前は10文字までです';
  if (Object.keys(errors).length > 0) {
    return data({ errors }, { status: 400 });
  }

  await addCat(name, color);
  return redirect('/');
}

import { Form, useActionData } from 'react-router';

export function NewCat() {
  const actionData = useActionData<typeof newCatAction>();
  return (
    <Form method="post">
      <label>
        名前 <input name="name" />
      </label>
      {actionData?.errors.name && <p role="alert">{actionData.errors.name}</p>}
      {/* 毛の色と送信ボタンは前と同じ */}
    </Form>
  );
}

errors/NoCheck.tsx(6,14): error TS18048: 'actionData' is possibly 'undefined'.

  412ms router: navigation.state=submitting location=/new
  412ms newCatAction: 開始（method=POST）
  415ms newCatAction: formData = {"name":"","color":"三毛"}
  415ms newCatAction: 入力に誤りがあるので 400 で返す（名前を入れてください）
  416ms router: navigation.state=idle location=/new
  417ms NewCat を描画（navigation.state = idle、actionData = {"errors":{"name":"名前を入れてください"}}）

  440ms router: navigation.state=submitting location=/new
  440ms newCatAction: 開始（method=POST）
  444ms newCatAction: formData = {"name":"しろ","color":"白"}
  445ms NewCat を描画（navigation.state = submitting、actionData = null）
  945ms addCat: しろ（白）を保存した
  945ms newCatAction: 一覧へリダイレクトする
  947ms router: navigation.state=loading location=/new
  947ms rootLoader: 開始
  951ms NewCat を描画（navigation.state = loading、actionData = null）
 1247ms rootLoader: 終了（3匹）
 1249ms router: navigation.state=idle location=/

import { Form, useActionData, useNavigation } from 'react-router';

export function NewCat() {
  const actionData = useActionData<typeof newCatAction>();
  const navigation = useNavigation();
  const submitting = navigation.state === 'submitting';
  return (
    <Form method="post">
      {/* 名前の欄、誤りの表示、毛の色の欄は前と同じ */}
      <button type="submit" disabled={submitting}>
        {submitting ? '登録中…' : '登録する'}
      </button>
    </Form>
  );
}