[React] React-router-dom의 Redirect

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import SignUp from '@pages/SignUp';
import LogIn from '@pages/LogIn';

const App = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
    </Switch>
  );
};

export default App;

 

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

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

Switch와 Redirect를 react-router-dom에서 찾을 수 없다는 에러가 납니다.

 

찾아보니 react-router-dom이 v6로 업데이트되면서 Switch와 Redirect가 사라졌습니다.

Switch 대신 Routes, Redirect 대신 Route에 Navigate를 사용하면 됩니다.

 

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import SignUp from '@pages/SignUp';
import LogIn from '@pages/LogIn';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/login" replace />} />
      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
    </Routes>
  );
};

export default App;

Navigate에 replace 옵션을 주시면 원래 주소("/")가 history stack에 추가되지 않습니다.