[React Error/리액트 에러] Attempted import error: 'useHistory' is not exported from 'react-router'.

회사에서 작업 중이던 프로젝트에서 패키지 이것저것 업데이트하다가 완전히 꼬여버렸다
node-modules를 삭제하고 yarn cache clean을 해봤지만
아래와 같이 react-router에서 Attempted import error가 떴다

 

발생 에러 

Attempted import error: 'useHistory' is not exported from 'react-router'.

 

원인.

예~~ 전에 react-router v3를 사용하다가 중간에 react-router-dom v5.2.0으로 업데이트를 했는지
일부에서는 useHistory를 'react-router'에서 import 해왔고 또 일부에서는 'react-router-dom'에서 import를 해왔다
(내 잘못 아님,,ㅠ 누군가 짜 놓은 코드임,,,)

react-router와 react-router-dom의 차이를 간단히 설명하자면
react-router v4 버전부터 웹 개발자를 위한 react-router-dom, 그리고 앱 개발자를 위해 react-router-native가 릴리즈 되었다고 한다.

react-router-dom은 react-router로 뻗어 나온 모듈이므로,,, 어떻게 ,, 'react-router'에서 import를 해와도 여태껏 문제가 없었던 모양이다. 그리고 이번에 yarn install 한 번에 여기저기 에러가 속출... 그리고 해결법은 간단했다.

 

해결법.

react-router가 아닌 react-router-dom에서 import를 하면 된다~

import { useHistory, useParams } from 'react-router'; // error
import { useHistory, useParams } from 'react-router-dom'; // success

사실 react-router-dom에서 Attempted import error는 대부분 버전 업그레이드의 문제라서 
나와 같은 케이스는 별로 없겠지만.. 그래도 혹여나 저처럼 어이없는 이유로 에러를 겪을 분들을 위해 글 남깁니다..

 

도움이 되었다면,, 광고 클릭 부탁해요,,, 😀
안되었어도,, 부탁해요,,, 😀