HTML forms 는 링크와 마찬가지로 navigation 이벤트입니다. React Router 는 클라이언트 측 라우팅을 통해 HTML form 워크플로우를 지원합니다.

양식이 제출되면, 일반적인 브라우저 navigation 이벤트가 prevent 되고, 제출된 양식의 FormData 가 포함된 본문이 포함된 Request 이 생성됩니다. 이 요청은 양식의 <Form action> 과 일치하는 <Route action> 으로 전송됩니다.

양식 요소의 name 프로퍼티가 액션에 제출됩니다.

<Form action="/project/new">
  <label>
    Project title
    <br />
    <input type="text" name="title" />
  </label>

  <label>
    Target Finish Date
    <br />
    <input type="date" name="due" />
  </label>
</Form>

일반 HTML 문서 요청은 차단되고 request.formData 를 포함하여 일치하는 경로의 액션(<form action> 과 일치하는 <Route path>)으로 전송됩니다.

<Route
  path="project/new"
  action={async ({ request }) => {
    const formData = await request.formData();
    const newProject = await createProject({
      title: formData.get("title"),
      due: formData.get("due"),
    });
    return redirect(`/projects/${newProject.id}`);
  }}
/>