[React] valid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 해결하기

export default function Withdraw() {
  const { userPk } = useParams();

  //작동 안함
  const handleWithdraw = () => {
    axios
      .delete(`http://localhost:8080/user/withdraw/${userPk}`)
      .then((response) => {
        console.log("Withdrawal request sent successfully.");
        console.log("HTTP response code:", response.status);
        Navigate("/complete");
      })
      .catch((error) => {
        console.error("Withdrawal request failed:", error);
      });
  };

프로젝트 중 React로 탈퇴를 구현하려는데 

 

위 코드에서 자꾸 valid hook call 에러가 났다.

 

에러를 보니 세 가지 이유가 있을 수 있다고 해서 다시 찾아보았다.

 

1. You might have mismatching versions of React and the renderer (such as React DOM)

버전을 확인하라고 해서 package.json을 확인한 결과

16버전 이상이고 일치한다.

2. You might be breaking the Rules of Hooks

https://legacy.reactjs.org/docs/hooks-rules.html

Rules of Hooks – React

https://pimpdevelop.tistory.com/14

[에러해결] Invalid Hook Call Error

 

여기서 뭔가 이상하길래 확인해보니

 

받은 코드에서 navigate을

react-router-dom에서 Navigate로 받아오고 있었다.

우리가 받아와야할 것은

 

import { useNavigate } from "react-router--dom";

이런 형태였다.

 

https://carmack-kim.tistory.com/127

react 에서 navigate 사용하기 (useNavigate / Navigate)

차이를 찾아보니 이렇다고 한다.

 

추후에 react도 전체적으로 한 번 정리해야겠다!