react-router-dom 오류

 

react-router-dom를 설치하니, 

npm install react-router-dom

 

아래와 같은 오류가 발생하였다.

 

 

 

 

 

아래 명령어로 버전을 확인했더니, 버전6을 사용하고 있는 것을 확인할 수 있었다.

 

npm list react-router-dom

 

 

 

 

"react-router" 패키지에는 여러 기능과 함수들이 내보내기 되어 있다. 하지만 여기에 나열된 오류 메시지들은 "react-router-dom" 패키지에서 일부 내보내기를 찾지 못했다는 것을 나타낸다.

예를 들어, 이 오류 메시지에서는 'react-router' 패키지에서 AbortedDeferredError, NavigationType, createPath등의 내보내기를 찾지 못했다고 말하고 있다. 하지만 이러한 내보내기들은 'react-router' 패키지에 포함되어 있지 않다. 대신에 'react-router-dom' 패키지에 있는 일부 내보내기로 보인다.

이러한 오류는 주로 버전 충돌이나 잘못된 의존성 관리로 인해 발생할 수 있다. 보통은 'react-router'와 'react-router-dom' 버전 간의 호환성 문제일 가능성이 높다. 따라서 이를 해결하기 위해 두 패키지의 버전을 맞춰주는 것이 중요하다.

 

 

따라서, 아래 명령을 입력하여 다운그레이드를 하였더니 오류가 사라지는 것을 확인할 수 있었다.

npm install react-router-dom@5

 

 

하지만, 모듈을 빌드하는데 실패했다는 새로운 오류가 발생했다.

 

 

react-router와 react-router-dom의 버전은 동일했기 때문에 버전 문제는 아니었다.

 

 

 

https://stackoverflow.com/questions/74837774/react-router-enoent-no-such-file-or-directory

React Router - ENOENT: no such file or directory

 

 

 

 

module 폴더를 삭제하고 다시 npm install 을 하니 오류가 완전히 사라진 것을 확인할 수 있었다.

 

하지만 버전에 따라 <Switch> 태그와 <Routes>태그를 다르게 사용해야하는 등의 문제가 발생할 수 있으니, 프로젝트를 진행하는 과정에서 어떤 버전을 사용할 것인지 논의해볼 필요가 있을 것 같다.

---

v6 사용

팀원과 논의해본 결과, 최신 버전인 6 버전을 사용하기로 결정하였다. 따라서

React-Router를 최신 버전으로 업데이트 하는 명령어를 사용해 업데이트 해주었다.

npm install react-router-dom@latest

 

v5와 차이점으로 아래와 같이 변경해주었다.

• <Switch> → <Routes>
• useHistory() → useNavigate()