[react-router] 로그인 페이지로 이동 / 이전 페이지로 돌아가기 (+ 현재 페이지에 어떻게 왔는지 구분하기)

현재 하고 있는 프로젝트에서 로그인 페이지를 담당하고 있는데, 다음 기능을 추가해보고 싶어졌다.

• 로그인하지 않은 상태에서 로그인이 필요한 페이지로 들어갔을 때, 로그인 페이지로 강제 이동 (redirect)
• 위의 경우에 로그인하면 이전 페이지로 이동하기

근데 유의해야할 점이 강제 이동을 해서 온건지, 아니면 다른 경로로 온건지를 구분할 필요가 있다!
-> 로그인했더니 의도하지 않은 이상한 페이지가 나오면 안되니까!

그래서 react-router의 공식 페이지를 살펴보고 다음 기능을 사용했다.

• redirect: 로그인 페이지로 강제 이동 시키기
• useNavigate: 로그인하면 다른 페이지로 이동하기
• useNavigationType: 현재 페이지에 어떤 방식으로 왔는지 알아내기

react-router를 기반으로 페이지를 나눈 서비스를 기준으로 합니다.

로그인이 필요한 페이지

• 로더에 초반부에 다음과 같이 작성한다.

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

export const loader = async () => {
  if(로그인이 되어있지 않다면) return redirect("/login");
};

로그인 페이지

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

function Login() {
	const navigate = useNavigate();
  	const navigationType = useNavigationType();
  
  	function login() { // 로그인하게 되면
    	if(navigationType === "PUSH") navigate(-1); // redirect로 왔다면 이전 페이지로
        else navigate("/"); // 홈으로
    }
}