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

클론 코딩을 하던 중 해당 error가 발생하였다.

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

원인을 알아보니 React6 version 부터 react-router-dom에 switch를 제공하지 않고 Routes로 네이밍 변경이 일어난 것이다.

route의 복수개를 나타내는 이유로 routes로 변경 되었다고한다.

기존코드

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./pages/Home";

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

export default App;

변경 코드

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";

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

export default App;