본문 바로가기
FullStack/12. React

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

by nakanara 2022. 1. 24.
반응형

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

react-router-dom v6 버전에서 Redirect가 사라지고 Navigate로 변경.

 

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

const AppRouter = ({ isLoggedIn }) => {  
  return (
    <Router>
      <Switch>  
        <Redirect from="*" to="/" />
      </Switch>
    </Router>
  );
};

export default AppRouter;

 

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

const AppRouter = ({ isLoggedIn }) => {  
  return (
    <Router>
      {isLoggedIn && <Navigation />}

      <Routes>
        {isLoggedIn ? (
          <>
            <Route exact path="/" element={<Home/>} />
            <Route exact path="/profile" element={<Profile/>} />  
          </>
        ): (
          <Route exact path="/" element={<Auth/>} />
        )}
        <Route path="*" element={<Navigate replace to="/" />} />        
      </Routes>
    </Router>
  );
};

export default AppRouter;
반응형