contact route 코드를 보면 삭제 버튼을 발견할 수 있다.

// 📄src/routes/contact.jsx

<Form
  method="post"
  action="destroy"
  onSubmit={(event) => {
    if (
      !confirm(
        "Please confirm you want to delete this record."
      )
    ) {
      event.preventDefault();
    }
  }}
>
  <button type="submit">Delete</button>
</Form>

<Form> 컴포넌트의 "action" prop이 "destroy"를 가리킨다.

<Link to> 와 같이 <Form action> 도 상대 주소 값을 가질 수 있다.

즉, 위의 form이 "contact/:contactId" 에 렌더링 되므로 form의 데이터는 "contact/:contactId/destoy" 로 submit된다.

Create the "destroy" route module

touch src/routes/destroy.jsx

Add the destroy action

// 📄src/routes/destroy.jsx

import { redirect } from "react-router-dom";
import { deleteContact } from "../contacts";

export async function action({ params }) {
  await deleteContact(params.contactId);
  return redirect("/");
}

Add the destroy route to the route config

// 📄src/main.jsx

/* existing code */
import { action as destroyAction } from "./routes/destroy";

const router = createBrowserRouter([
  {
    path: "/",
    /* existing root route props */
    children: [
      /* existing routes */
      {
        path: "contacts/:contactId/destroy",
        action: destroyAction,
      },
    ],
  },
]);

/* existing code */

정리해보자.

사용자가 삭제 버튼(submit)을 누르면 다음과 같이 된다.

1. <Form> 은 서버에게 POST request 하는 걸 막는 대신, client side routing을 한다.

2. <Form action="destroy"> 는 "contacts/:contactId/destroy" route에게 request한다.

3. action 함수에서 redirects 한 후에, React Router는 페이지의 데이터에 대한 모든 loader를 호출하여 최신 값을 가져온다. 즉, 재검증한다.
   useLoaderData 는 새 값을 반환하고 업데이트 한다.

출처 : 리액트 라우터 공식 홈페이지➡️