반응형

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

 

# 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>
  );
};
반응형
저작자표시 비영리 동일조건

'Basic > React' 카테고리의 다른 글

[React] Realtime으로 데이터 주고받기  (0) 2023.02.09
vite에서 proxy 설정하기  (0) 2023.02.07
[React] <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>  (0) 2023.02.01
[React] SPA 프레임 워크  (0) 2023.01.24
[React] local에서 실행 시 render가 두 번 되고 있어요!  (0) 2023.01.23

티스토리툴바