0. 주제 선정하게 된 배경 :
예매 페이지에서 영화/극장/시간 선택후 인원/좌석선택 페이지로 넘어가려면
로그인이 되어 있어야 함.
1) 로그인이 되어있는 경우 : 인원/좌석선택 페이지로 이동
2) 로그인이 안되어 있는 경우 : 로그인 페이지로 이동
2번째의 경우 로그인을 한 후에는 다시 원래 있던 페이지로 되돌아가고 싶었음
1. 제대로 알고 넘어가기 : useLocation()
1. 로그인 화면으로 넘어가기 전 페이지에서
- react-router-dom으로부터 useLocation을 받아오고,
현재 페이지의 path는 useLocation()으로 pathname 받아서 알아오기!
import { useLocation, useNavigate } from "react-router-dom";
const { pathname } = useLocation();
- 로그인 화면으로 이동시, state에 알아낸 pathname을 넣어주기
navigate('/login', {state: pathname})2. 로그인 페이지에서
- useLocation()에서 state를 받아서 로그인이 성공한 경우 state에 저장된 경로로 이동하게 하기
state가 없을수도 있기 떄문에 예외처리 해주기
const { state } = useLocation();
if (state) {
navigate(state);
}+ [24.04.29 추가]
3. 로그인 페이지에서 회원가입 페이지로 넘어갈 경우
- 예매페이지에서 저장한 pathname을 로그인 페이지에서 state로 불러올수있지만,
회원가입이 안된 사용자여서 로그인 페이지에서 회원가입 페이지로 넘어가면
저장해둔 pathname이 사라진다.
따라서, 회원가입후 로그인해도 예매 페이지로 돌아가지 못한다.
이 문제를 해결하기 위해서,
회원가입하고 로그인 페이지로 넘어가면
1. 로그인 페이지에서 이전 페이지가 회원가입이였는지 확인하고,
2. 맞다면 navigate(-3)로 로그인 페이지로 넘어오기 직전의 페이지로 돌려준다.
2. 적용해보기
커밋내역
: 5f5b4c14120fe32ee249c042b0560ae111d6afec
- 24.04.29 추가 : 0f43b15b0e62250a401f7ced9a30b1b37a66bcf1
삐약