Easy is Perfect

[Error Solve] export 'Switch' is not exported from 'react-router-dom' 문제 해결하기

  • melonicedlatte
  • Jan 12, 2022


1. 문제

React 를 이용하여 어플리케이션 제작을 하던 도중 아래와 같은 에러를 만났습니다.

Compiled with problems:X

ERROR in ./src/components/Router.js 10:35-41

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)

2. 해결 방법

문제점을 확인해보니 ‘React-router-dom’ 오류에서 ‘Switch’는 정상 동작하지 않습니다. 스위치는 react-router-dom 버전 6에서 대체되었습니다. 6 버전에서는 Switch는 routes로. component는 element로 바뀌었습니다. 따라서, Switch를 쓰고 싶으면 react-router-dom 5 버전를 설치해야 합니다.

2.1. react-router-dom 5 버전으로 설치하기

npm install react-router-dom@5

2.2. Switch 대신에 Routes 사용하기

// react-router-dom@5
<Router>
<Switch>
    <Route exact path="/">
      <Home/>
    </Route>
</Switch>
</Router>

// react-router-dom@6
<BrowserRouter>
  <Routes>
    <Route exact path="/" element={<Home />} />
  </Routes>
</BrowserRouter>



Search