성빈
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
I'm a beginner to React and I'm having issues which I have no idea how they even arose on a React project I've been playing with. Obviously I'm assuming the error is to do with the React Router pac...
stackoverflow.com
module 폴더를 삭제하고 다시 npm install 을 하니 오류가 완전히 사라진 것을 확인할 수 있었다.
하지만 버전에 따라 <Switch> 태그와 <Routes>태그를 다르게 사용해야하는 등의 문제가 발생할 수 있으니, 프로젝트를 진행하는 과정에서 어떤 버전을 사용할 것인지 논의해볼 필요가 있을 것 같다.
v6 사용
팀원과 논의해본 결과, 최신 버전인 6 버전을 사용하기로 결정하였다. 따라서
React-Router를 최신 버전으로 업데이트 하는 명령어를 사용해 업데이트 해주었다.
npm install react-router-dom@latest
v5와 차이점으로 아래와 같이 변경해주었다.
- <Switch> → <Routes>
- useHistory() → useNavigate()
'React' 카테고리의 다른 글
PDF 전환 라이브러리 비교 (jsPDF 라이브러리 + html2canvas 라이브러리, pdfmake, puppeteer, PDFKit, react-pdf) (0) | 2024.08.06 |
---|---|
useHistory 그리고 useNavigate (0) | 2024.07.23 |
fetch와 axios (1) | 2024.07.23 |
텍스트 편집기 직접 만들기 (0) | 2024.03.21 |
텍스트 입력 시, 한글 마지막 글자가 추가되는 문제 (0) | 2024.03.12 |