React Router v6으로 리디렉션

문제
인증되지 않은 경우 사용자를 로그인 페이지로 다시 리디렉션하는 앱 빌드.

해결책
사용자가 페이지를 보려고 시도하고 인증되지 않은 경우 로그인으로 다시 리디렉션하기 위해 반응 라우터 6 및 간단한 조건 논리와 함께 Navigate를 사용할 수 있습니다.

사용자를 인증하기 위해 POST 요청을 수락하는 백엔드 설정이 있다고 가정해 보겠습니다. 프런트 엔드는 POST 가져오기 요청을 보내고 인증된 경우 해당 사용자를 상태로 저장하도록 설정되어 있습니다. 프런트 엔드 가져오기는 다음과 같을 수 있습니다.

const body = {
  username: username,
  password: password,
};

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
}).then((r) => {
  if (r.ok) {
    r.json().then((user) => setCurrentUser(user));
    navigate("/home");
  } else {
    r.json().then((err) => setErrors(err.errors));
});

이제 React Router v6 및 Navigate를 활용하여 인증된 사용자가 상태(currentUser)에 저장되어 있는지 여부에 따라 사용자를 리디렉션할 수 있습니다.

npm install react-router-dom@6 명령으로 수행할 수 있는 React Router v6를 설치했는지 확인하세요.

다음으로 react-router-dom에서 BrowserRouter, Navigate, Routes, Route를 가져왔는지 확인합니다.

import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom"

경로가 설정되면 인증된 사용자가 상태인지 확인하기 위해 다음 논리 비트를 추가할 수 있습니다. 다음 코드는 개를 보여주는 페이지가 있다고 가정합니다.

<Route 
  path="/dogs"
  element={
    !currentUser ? <Navigate to="/login" /> : <DogsShow />
/>

영어로 이것은 currentUser가 아닌지 묻는 다음/login else render DogsShow로 이동합니다.

그리고 앱에 리디렉션 논리를 추가하는 빠르고 쉬운 방법이 있습니다.