[React] a history only accepts one active listener 오류

만일 기존 프로젝트를 열고 실행시 해당 오류가 발생했다면, 이는 History 라이브러리와 react-route-dom 간 충돌로 인한 문제이다. 

오류가 발생하는 소스코드에서 다음의 코드수정을 한다.  이외 더 있을 수 있다. 

 

• import 에서 History 부분 주석처리 혹은 삭제
• import react-route-dom 부분에서, useNavigate 추가
• History 자료형을 사용 하던 부분들을 삭제하고 react-route-dom 것을 사용
  • useContext(UNSAFE_NavigationContext).navigator as History 를 const navigator = useNavigate(); 로 수정
• navigator.listen 삭제
• 이동시, navigator.push 를 통해 이동