개발자
Next 14에서 새 탭을 링크로 열기 이후 UI 헤더에 커스텀한 뒤로가기 버튼 클릭 시 history가 없어 router.back()이 작동하지 않네요. 새탭에서 url로 검색 시에도 뒤로가기 시 메인 페이지로 이동시키고 싶은데 방법을 모르겠어요. 예를 들면 카카오웹툰처럼 페이지 이동을 하고 싶습니다. 도와주세요 🙏
답변 2
익명
작성자
1월 20일
제가 설명이 부족했네요. 죄송합니다. 1. 새 탭을 링크로 열었을 때, 헤더에 커스텀한 뒤로가기 버튼을 클릭하면 history가 없어서 router.back()이 작동하지 않습니다. 2. 새 탭에서 URL로 직접 접근했을 때도, 헤더에 커스텀한 뒤로가기 버튼을 클릭하면 메인 페이지로 이동하고 싶습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
1월 8일
Next.js Router에서 뒤로 가기 기능을 구현하는 것은 히스토리 스택이 없어져서 조금 복잡할 수 있습니다. 하지만 여러분의 문제를 해결하는 방법 중 하나는 라우터가 변경될 때마다 현재 위치를 쿠키, 로컬 스토리지 또는 세션 스토리지에 저장하고 사용자가 '뒤로' 버튼을 클릭할 때마다 이전 위치로 되돌아오게 하는 것입니다. 다음은 이러한 액션을 수행하는 간단한 코드 예제입니다: ```jsx import { useEffect } from "react"; import { useRouter } from 'next/router' const MyApp = ({ Component, pageProps }) => { const router = useRouter(); useEffect(() => { const handleRouteChange = (url) => { sessionStorage.setItem('lastRoute', url); }; router.events.on('routeChangeStart', handleRouteChange); return () => { router.events.off('routeChangeStart', handleRouteChange); }; }, [router]); const goBack = () => { const lastRoute = sessionStorage.getItem('lastRoute'); if (lastRoute) { // If there is a history in the session storage router.push(lastRoute); } else { // Go to main page if not found router.push('/'); } }; return <Component {...pageProps} goBack={goBack}/> } export default MyApp; ``` 그런 다음 컴포넌트에서 `props.goBack` 함수를 호출하여 이전 페이지로 이동할 수 있습니다. 또는 없다면 메인 페이지('/')로 이동하게 됩니다. 이렇게 하면 새 탭에서 URL로 검색 후 뒤로 가기 버튼을 클릭했을 때 메인 페이지로 이동하게 됩니다. 만약에 세션 스토리지 대신 다른 방식으로 저장하고 싶은 경우, 위의 예제를 참고하여 쿠키나 로컬 스토리지 등으로 변경하여 사용하실 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!