[react] react-router-dom V6 Redirect

v5에서 v6로 오면서 Redirect 역시 사라졌다.

따라서 이를 대체하기 위해 <Navigate replace to="" />을 사용할 수 있다.

 

코드 설명: islogin 변수가 true이면 Home page로 redirect하게 해주었다.

기존 방식

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import Links from "./components/Links";
import NavLinks from "./components/NavLinks";
import About from "./pages/About";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Profile from "./pages/Profile";
import Login from "./pages/Login";
const islogin = true;
function App() {
  return (
    <BrowserRouter>
      <Links />
      <NavLinks />
      <Routes>
        <Route
          path="/login"
          render={() => (islogin ? <Redirect to="/" /> : <Login />)}
        />
        <Route path="/profile/:id" element={<Profile />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

V6 방식

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import Links from "./components/Links";
import NavLinks from "./components/NavLinks";
import About from "./pages/About";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Profile from "./pages/Profile";
import Login from "./pages/Login";
const islogin = true;
function App() {
  return (
    <BrowserRouter>
      <Links />
      <NavLinks />
      <Routes>
        <Route
          path="/login"
          element={islogin ? <Navigate replace to="/" /> : <Login />}
        />
        <Route path="/profile/:id" element={<Profile />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;