React@18과 react-router-dom@5의 호환성 문제

 

 

이슈  

제로초 강의를 CRA로 옮기면서 생긴 문제였다. react-router-dom을 사용해서 라우팅 처리는 다했고

마지막으로 결과를 확인하던 찰나에 다음과 같은 문제가 생겼다. 
     

로그인 페이지에서 회원가입으로 이동하려고 했는데 url는 정상적으로 변경되지만 회원가입 페이지가

랜더링되지 않는다. 

 

일단 제일 먼저 해결한 방법으로는 index.js 파일에서 <React.StrictiMode> 를 제거하는 거였다.

생각했던 거처럼 로그인 페이지에서 회원가입 페이지로 잘 이동되었다. 여기서 끝내면 찝찝해서 좀 더

찾아보고 오픈톡에도 물어보다가 알게 된 게 있어서 이렇게 정리해본다. 

 

일단 본인이 사용한 리액트의 버전은 18이였고 react-router-dom의 버전은 5.2.0 이었다. 리액트 18에서는

react-router-dom 5.3.3 이하의 버전에서는 호완이 되지 않는 이슈가 있었고 이것을 5.3.3 이상 또는 6으로

변경하거나 리액트를 17버전으로 다운그레이드하면 해결이 된다. 

       

          

이렇게 버전을 맞추던가 아니면 

 

       

이런식으로 react-router-dom의 버전을 5.3.3(이상)으로 맞추면 된다. 

           

        

끝으로

이것을 해결하면서 느낀건 에러가 나지는 않은데 생각했던 것처럼 작동이 되지 않으니 너무 답답했다.

에러라도 나면 그 에러를 구글링을 하던 물어보면 되겠지만 이건 어떠한 에러도 알려주지 않으니까 ... ㅜㅜ

        

일단 에러 없이 이런식으로 동작을 제대로 하지 않는다면 버전이 충돌(호완성 문제) 되는지도 확인해야겠다.