Nextjs 로그인시 이전페이지로 이동

로그인이후에 기존에 보던 페이지로 이동하기위해 router history를 저장하는법에 대해 알아보자

_app.tsx

• useEffect안에서 router.event.on 와 router.event.off를 통해 router가 변할때 마다 실행되는routeChangeComplete 이벤트를 걸어준다.
• 매 이벤트마다 sessionStorage에 이전, 현재 rotuer값을 넣어주어 필요시 꺼내서 사용한다.

let prevRoute
let currentRoute
const MyApp = ({ Component, pageProps }) => {
    const router = useRouter()
    
   useEffect(() => {
    const handleRouteChange = (url: string) => {
      prevRoute = currentRoute;
      currentRoute = url;
      sessionStorage.setItem("prevRoute", prevRoute);
      sessionStorage.setItem("currentRoute", currentRoute);
    };
    
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);
    
    
    
    
    return (
        <>
            <Component {...pageProps} />
        </>
    );
};
export default MyApp;

login.tsx

// 로그인 요청
 const { data } = await requestLogin({id,pw});
 
 // 로그인 성공시 이전페이지로 이동
 if(data){ 
 	router.push(`${sessionStorage.getItem("prevRoute")}`) 
 }