TIL 23.02.23.

react-router-dom 에서의 Redirect가 import 되지않는다. 열심히 구글링 해 본 결과, Redirect라는 컴포넌트는 V6부터 사라졌다고한다. 대신 useNavigate를 사용하거나 redirect를 쓴다고한다. 공식문서에서는 "리디렉션이 데이터에 응답할 때는 구성 요소에서 'useNavigate' 대신 로더 및 작업에서 'redirect'를 사용하는 것이 좋습니다." 라고 나와있다.

둘 의 사용법의 차이는 아래와 같다.

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

import { redirect } from "react-router-dom";

const loader = async () => {
  const user = await getUser();
  if (!user) {
    return redirect("/login");
  }
};

사용법을 보고 나니, 로그인 같은 데이터 응답이 필요한 경우엔 redirect를 쓰는것같다.

참고 블로그 :https://developer-ping9.tistory.com/231