edit 페이지에 "취소"버튼이 있다.

브라우저의 뒤로 버튼과 같은 동작을 하고자 한다.

React Router의 useNavigate 뿐만 아니라, 클릭 핸들러도 필요하다.

Add the cancel button click handler with useNavigate

// 📄src/routes/edit.jsx

import {
  Form,
  useLoaderData,
  redirect,
  useNavigate,
} from "react-router-dom";

export default function EditContact() {
  const { contact } = useLoaderData();
  const navigate = useNavigate();

  return (
    <Form method="post" id="contact-form">
      {/* existing code */}

      <p>
        <button type="submit">Save</button>
        <button
          type="button"
          onClick={() => {
            navigate(-1);
          }}
        >
          Cancel
        </button>
      </p>
    </Form>
  );
}

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