react-router-dom v.6 error

이 에러는 react-router-dom 버전이 바뀌면서 자주 발생되는 에러인데 나의 경우에는 2가지 방법으로 해결할 수 있었다.

 

1. 버전 낮추기

 

일단 v.6.3.0에서 리액트 라우터 사용하는 코드는 밑에 코드와 같은데 이렇게 사용해서 에러가 해결된다면 굳이 버전을 낮출 필요 없다. (이거 쓰고도 버전 낮추기 싫은데 에러 생기신 분은 2번 방법 먼저 확인해주세요!!)

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

그냥 리액트 라우터 버전이 바뀌면서 사용법이 바꼈다. 이 버전을 공부해서 사용하기 편하다면 그대로 사용하면 된다.

근데 swich나 이전 버전의 라우터가 익숙하다 싶은 사람, 이전 버전의 라우터를 꼭 사용하고 싶다는 사람들은

package.json에 들어가서 dependencies에 보면 react-router-dom 버전이 "^6.3.0"으로 된 경우에 "^5.3.0"으로 다운그레이드 한 뒤 사용하면 문제가 해결된다.

만약 package.json에 react-router-dom이 없다면 제대로 설치가 안된 경우이므로 

이 사진에서 13번째 줄 확인

npm install react-router-dom --save

이렇게 입력 해준뒤 다시 package.json을 확인하기 바란다.

 

2. 버전 낮추지 않고 그냥 사용하고 싶은데...

 

내 경우에는 간단하게 해결 됐다. react-router-dom 설치 후에 최신 버전으로 react-router-dom 코드를 작성한 뒤에도 에러가 뜬다면 혹시 터미널 한번 꺼보시겠어요(ctrl+c)?? 그리고 다시 npm start를 하면 에러창이 사라진걸 확인할 수 있었다. 잘은 모르겠으나 react-router-dom설치 후에 다시 시도를 해줘야 제대로 작동을 하는걸 볼 수 있다. 내 경우에는 npm start로 켜둔 상태에서 리액트로 작업하다 갑자기 router기능을 넣고 싶어 중간에 설치를 했는데 바로 적용이 안돼서 에러가 난 경우라 한 번 터미널 끄고 다시 켰더니 에러창이 사라졌다.

이런 에러 창이 껐다 다시 키면 사라졌다.

 

나와 비슷한 에러로 시간 잡아먹지 않았으면 좋겠어서 쓰는 글.... 보고 해결 되셨다면 좋겠습니다!!

원하는 작업물 나오길 바래요~~!!☺️