[React.js] 버전 호환 문제

React.js 17버전과 React Router 버전5와 결합했을 때 충돌이 생기지 않는다.

React.js 18버전과 React Router 버전6와 결합했을 때 충돌이 생기지 않는다.

 

참고로 React Router 버전5와 React.js 18버전을 함께 사용할 경우, 예를 들어 메인페이지에서 링크 클릭후 서브페이지로 이동을 원할 시 url은 변경되나 페이지가 렌더링되지 않는 현상이 있다.

 

직접 겪고 당황하여 찾아봤는데 React.js 버전을 17로 다운그레이드 하거나, Switch 컴포넌트 대신 Route를 쓰고 element={}로 해당 되는 컴포넌트를 작성하는 특징이 있는 라우터 버전 6으로 라우터 버전 업그레이드를 권장하는 거같다.

 

또한 React.js 18버전일 경우, 타입스크립트에서 React Query를 불러오지 못한다고 한다. 이부분은 아직 해보기전이라 기록용으로 남긴다.

-> 리액트 버전을 18로 할경우, npm i @tanstack/react-query로 설치 및 const {isStatus, state} = useQuery(["allItems"], fecthItems);

 

자세하게는 모르겠으나 어쨌든 나는 리액트 버전을 18에서 17로 다운그레이드를 하여 라우터 버전5으로 공부중이다. 🙂