React Error) router.ts:11 You should call navigate() in a React.useEffect(), not when your component is first rendered.

JSX 상에서 라우팅 함수를 잘못 쓰는 바람에 발생한 오류로, onClick={navigate(path)}을 onClick={()=>navigate(path)}으로 바꾸면서 해결되었다.

참고) 오류가 난 코드(예시)

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

const ComponentEx () {
	const navigate = useNavigate();
	return (
    	<>
        	<Button onClick={navigate("/")}>Go Main</Button>
        </>
    );
}

 

참고) 오류가 해결된 코드(예시)

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

const ComponentEx () {
	const navigate = useNavigate();
	return (
    	<>
        	<Button onClick={()=>navigate("/")}>Go Main</Button>
        </>
    );
}