export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 오류

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'  오류

 

Switch 를 찾을 수 없다 라는 오류가 나서 먼가 하고 봤더니 

 

react-router-dom 이 버전 6로 업그레이드되면서,
Switch 를 더이상 지원을 하지 않는다는 ㅠㅠ.

 

Switch -> Routes 로 변경해서 쓰면 된다.

속성 중에 component 도 element 로 바꾸어서 사용해야 한다.

 

공식문서( https://reactrouter.com/docs/en/v6/upgrading/v5 ) 참조 

React Router | Upgrading from v5

 

 

 

아래는  react-router-dom  버전 5 

// This is a React Router v5 app
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

 

아래는  react-router-dom  버전 6 

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}