반응형
"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>
);
};
반응형