[React] Uncaught Error: useNavigate() may be used only in the context of a <Router> component.

에러 발생

업무 중에 다음과 같은 오류가 발생했다.

Uncaught Error: useNavigate() may be used only in the context of a <Router> component.

 

내용을 보아하니 라우터를 통해있는 컴포넌트 내부에서 useNavigate를 사용해야 한다고 나온다.

 

어떤 상황이었냐면, 개발 중인 화면 내부에서 라우터를 통해 움직이는 컴포넌트가 아닌 외부 컴포넌트에서 useNavigate()를 선언했던 것이다.

이 경우 useNavigate()를 선언 하기만 해도 바로 오류가 뱉어지니

나처럼 영문도 모른채 페이지 로드가 안된다면 개발자 도구 - 콘솔 창을 열어서 한번 확인 해보자.

 

해결 방법

다양한 해결법이 있다. 

window.location.replace('url') 을 사용한다던가

Link 를 통해 a 태그로 이동할 수 있겠지만 나같은 경우 모달 안에서 버튼을 통해 액션이 이루어져야 해서 Link 를 통한 이동이 안됐기 때문에 replace로 처리했다.

발생할 빈도가 굉장히 낮은 경우의 액션이라서 크게 신경쓰지 않았다.