React Router v7 ドキュメント 日本語版

English

useActionData

概要

リファレンスドキュメント ↗

最新の POST ナビゲーションフォーム送信からの action データを返します。まだ送信がない場合は undefined を返します。

import { Form, useActionData } from "react-router";
 
export async function action({ request }) {
  const body = await request.formData();
  const name = body.get("visitorsName");
  return { message: `Hello, ${name}` };
}
 
export default function Invoices() {
  const data = useActionData();
  return (
    <Form method="post">
      <input type="text" name="visitorsName" />
      {data ? data.message : "Waiting..."}
    </Form>
  );
}

シグネチャ

function useActionData<T = any>(): SerializeFrom<T> | undefined

戻り値

ルートの action 関数から返されたデータ、または action が呼び出されていない場合は undefined。