react-router-dom에서 Switch를 import할 수 없다고 에러가 뜰때

 

React로 개인 포트폴리오 사이트를 만드려고 합니다. 그런데 개발하는 도중, 계속 에러 메세지가 떠서 무슨 일이지 하고 보니, 메세지 내용이 Switch를 react-router-dom 패키지에서 import 할 수 없다 이런 내용있던 것 같습니다. 뭐지? 오타를 냈나하고 한참을 들여다봐도 오타를 찾지 못하다가 인터넷을 검색해서 발견할 수 있었습니다. 

 

참조 링크: https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom

Attempted import error: 'Switch' is not exported from 'react-router-dom'

 

위 링크 stackoverflow 에서 답변으로 react-router-dom v6에서 Switch가 Routes로 바뀌었다고 하더라구요. 그래서

import {Switch} from "react-router-dom";

이 아니라

import {Routes} from "react-router-dom";

으로 import를 해야한다고 합니다. 

 

Switch를 Routes로 바꾸고 했는데 오류는 안 뜨는데 원하는 Route에 컴포넌트가 나오지 않는 거에요. 그래서 그것때문에 또 한 2시간을 삽질하다가 (같은 답변에 있었는데 다 읽지않아서....) 결국 알게되었습니다. 이전 버전에서 Switch 문을 쓸 때는 Route 컴포넌트를 사용할때 component props 를 보냈는데 v6부터는 element 라는 proprs로 보내야한다고 합니다. 심지어 보내는 형태도 jsx 형태로 보내더라구요.

 

v6 이전에는 

<Route path="/" component={Home} />

이렇게 사용했다면

 

v6 이후엔

<Route path="/" element={<Home/>}/>

이렇게 바뀌었더라구요.

 

조금만 더 주의 기울여서 읽었다면 두시간을 낭비하지 않았을텐데...후....