[Error] 'Switch' is not exported from 'react-router-dom' 해결

'Switch' is not exported from 'react-router-dom'  해결 방법

✅  개념 

- react-router-dom v6로 업데이트 되면서 변경된 부분 중에 하나가 Switch가 Routes 로 바뀌었다.

✅  왜 배워야 할까?

- npm install "react-router-dom" 을 설치하게 되면, "react-router-dom": "^6.0.2" 이 설치가 된다

- 그럴 경우, 제목과 같은 에러를 만날 수 있다. 

- 버전 5를 까는 방법도 있지만 앞으로 사용해야하니 제대로 알고 넘어가야한다.

 

 

✅  기존에 있던 것과 차이점

바뀐 것이 여러가지 있지만, 바로 사용하는 4가지만 알아보겠습니다.

1. 70%나 작아진 번들 사이즈

번들 사이즈를 줄여야 하는 이유

- 성능 및 로드 시간의 차이는 사용자에게 미치는 영향이 크다.

 

구체적인 예시

• Akami 의 연구에 따르면 사이트를로드하는 데 4 초 이상 걸리면 사용자의 25 % 이상이 사이트 를 이탈하게 됩니다 .
• 2010 년에 Strangeloop Networks 는 Pinterest는 인지 대기 시간을 40 % 줄였을 때 검색 엔진 트래픽과 가입을 15 % 증가 시켰습니다.
• BBC 는 사이트를로드하는 데 1 초가 더 소요될 때마다 10 %의 추가 사용자 를 잃었다는 사실을 발견했습니다 .

 

2. switch -> routes 네임 변경

Switch가 Routes로 바뀌었다. 

// v5
<Switch>
  <Route ... />
</Switch>

// v6
<Routes>
  <Route ... />
</Routes>

3. exact는 더 이상 안 쓴다.

4. component 옵션이 element로 변경

이 두가지는 밑의 예시로 확인!

✅  간단하게 만들어 보기

// v5 버전
<Switch>
 <Route exact path="/" component={Home} />
 <Route path="/report" component={Report} />
 <Route path="/passenger" component={Passenger} />
</Switch>

// v6 버전
<Routes>
 <Route path="/" element={<Home />} />
 <Route path="/report" element={<Report />} />
 <Route path="/passenger" element={<Passenger />} />
</Routes>

 

 

출처:

https://ichi.pro/ko/js-beondeul-keugi-jul-igi-97702885003164

https://dev.to/narendersaini32/what-s-new-in-react-router-v6-2g8g

https://velog.io/@kcdoggo/Switch-is-not-exported-from-react-router-dom-%EC%97%90%EB%9F%AC

https://blog.woolta.com/categories/1/posts/211