[React] export 'Switch' is not exported from 'react-router-dom' 에러 해결 방법

서론

React에서 라우터 구현을 처리하기 위해 npm install react-router-dom을 해주었고 아래와 같은 에러를 마주했을 때 해결하는 방법을 정리하려한다.

 

---

 

오류 발생 작업 프로세스

npm install react-router-dom

import {BrowserRouter, Route, Switch } from 'react-router-dom'

위처럼 npm을 설치 후 아래의 import를 지정하고 실행 했을 때 발생하는 오류이다.

 

---

 

오류 내용

Compiled with problems:X ERROR
in
./src/components/Router.js 5:10-45
export
'Switch'
(
imported as
'Switch'
)
was not found
in
'react-router-dom'
(
possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams
)

 

---

 

해결 방법

에러의 내용이 Switch가 정상동작하지 않는다는 말인데, 찾아보니 스위치는 react-router-dom 6버전에서 대체되었다고 한다. 위와 같이 Switch를 사용하고 싶다면 5버전으로 npm을 다시 설치해야한다.

 

npm install react-router-dom@5