반응형

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