[React]Attempted import error: 'Switch' is not exported from 'react-router-dom'. 오류해결

 

새로 create-react-app을 해서 router를 하려던 중 오류가 나타났다.

기존에 있는 방법인 Switch를 활용했더니 문제가 난 것이다.

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

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

export default Router;

Switch가 가능했을 때 react-router-dom 버전

Switch를 Routes로 바꾸고 <Route exact path="/" component={Home}/>을  <Route exact path="/" element={<Home />} />로 변경하면 오류가 해결된다.

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

새로 바뀐 버전은 Switch에서 오류가 난다.