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

👉 원인

react-router-dom이 v6로 업데이트 되었기 때문이다.
v6에서는 Switch가 아닌 다른 방법을 사용한다.

 

 

👉 그래서 해결 방법은?

 

// v5
<Router>
   <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/Board" component={Board} />
   </Switch>
</Router>

// v6
<Router>
   <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/Board/*" element={<Board />} />
   </Routes>
</Router>

 

 

 

위와 같이 v6에서는 Switch가 아닌 Routes를 사용하며,
exact는 쓰지않고, component가 아닌 element를 이용한다.

만약 임의로 여러 라우팅을 매칭하고 싶을 땐 *를 이용합니다.

 

 

👉 성능

70% 작아진 번들 사이즈로 인해 성능이 상향 되었습니다.


출처 : https://miracleground.tistory.com/entry/Error-Switch-is-not-exported-from-react-router-dom-%ED%95%B4%EA%B2%B0