로그인 후 직전 페이지로 이동하기 (ft.React)

로그인 페이지에서 로그인 후 직전 페이지로 이동하기

React rotuer의 Redirect를 이용해 로그인 인증 시 로그인 페이지를 불렀던 페이지로 돌아가도록 구현했습니다.

Redirect의 state 속성

Redirect의 속성 중 이동할 url을 적는 to 속성과 state를 담는 state 속성이 있습니다. 이 state에 현재 url 정보를 담아 로그인 인증 시 state의 url로 이동하도록 구현하면 됩니다.

로그인 인증이 필요한 컴포넌트

1️⃣const { pathname } = useLocation();

if (!user) {
  2️⃣return <Redirect to={{ pathname: "/login", state: { from: pathname } }} />;
}

1. useLocation hook을 이용해 현재 url의 정보를 얻습니다.
2. user 데이터가 없으면 로그인 페이지로 Redirect, 이 과정에서 url 정보를 state를 이용해 전달합니다.

로그인 페이지

const LoginPage = ({ 1️⃣location }) => {
  2️⃣const { from } = location.state || 3️⃣{ from: '/profile' };

  if (user) {
    4️⃣return <Redirect to={from} />;
  }

  return (...)
}

1. 전달받은 state는 location 객체의 state에 있습니다.
2. url 정보를 담은 from을 구조 분해 할당을 통해 얻습니다.
3. 만약 Redirect가 아닌 Link를 통해 로그인 페이지로 들어온 경우, state를 가져올 수 없으므로 직접 url 정보 변수인 from에 경로를 지정하면 됩니다.
4. from으로 Redirect