본문 바로가기
FullStack/12. React

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

by nakanara 2022. 1. 21.
반응형

"Do it! 클론 코딩 트위터" 예제 진행 중, 'react-router-dom'에서  Switch를 찾을 수 없다는 오류가 발생했다. 

react-router-dom 6 버전에서 Switch가 Routes로 변경되었다. 

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)

 

# react-router-dom 5.x

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

const AppRouter = ({ isLoggedIn }) => {
  
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <Route exact path="/">
            <Home />
          </Route>
        ): (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </Switch>
    </Router>
  );
};

 

# react-router-dom 6.x

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

const AppRouter = ({ isLoggedIn }) => {
  
  return (
    <Router>
      <Routes>
        {isLoggedIn ? (
          <Route exact path="/" element={<Home/>} />
        ): (
          <Route exact path="/" element={<Auth/>} />
        )}
      </Routes>
    </Router>
  );
};
반응형