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

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다.

바로 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 입니다.

 

import { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <Route exact path="/">
            <Home />
          </Route>
        ) : (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </Switch>
    </Router>
  );
};

export default AppRouter;

위 처럼 코드를 짜보았지만 다음과 같은 에러가 출력됩니다.

지난번 제가 올린 리액트 파이어베이스의 오류와 비슷하듯 버전의 문제였습니다.

리액트 6버전 이상에서는 'Switch'를 지원하지 않아 뜨는 오류였습니다.

 

❖고쳐보기

일단 import부분을

import { HashRouter as Router, Route, Switch } from "react-router-dom";

밑과 같이 변경하시면 됩니다.

import { HashRouter as Router, Route, Routes } from "react-router-dom";

그 다음 <Switch></Switch>부분을

      <Switch>
        {isLoggedIn ? (
          <Route exact path="/">
            <Home />
          </Route>
        ) : (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </Switch>

밑과 같이 변경하시면 됩니다.

      <Routes>
        {isLoggedIn ? (
          <Route exact path="/" element={<Home />}></Route>
        ) : (
          <Route exact path="/" element={<Auth />}></Route>
        )}
      </Routes>