React Error) React Hook "useNavigate" is called in function that is neither a React function component nor a custom React Hook function

 이후에 원인을 알아서 다시 작성하겠다. 오류가 나는 경우는 아래처럼 컴포넌트 내에 이벤트를 선언하면서 useNavigate를 바로 호출한 경우이다.

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

const Comp = () => {
    const handleEvt = () => {
        useNavigate("/");
    }
}

 

 오류가 해결된 방법은 useNavigate를 바로 호출하는 것이 아니라 한번 변수에 담아서 사용한 방법이다.

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

const Comp = () => {
	const navigate = useNavigate();
    const handleEvt = () => {
        navigate("/");
    }
}

 

한번 변수에 담느냐 바로 쓰느냐의 차이인데 오류가 발생한다.. 정확한 원인을 알게 되면 다시 작성 예정이다.