개발자

Next 14에서 새 탭을 링크로 열기 이후 뒤로가기 시 메인으로 이동하고 싶은데 방법을 모르겠어요.

1월 8일조회 98

Next 14에서 새 탭을 링크로 열기 이후 UI 헤더에 커스텀한 뒤로가기 버튼 클릭 시 history가 없어 router.back()이 작동하지 않네요. 새탭에서 url로 검색 시에도 뒤로가기 시 메인 페이지로 이동시키고 싶은데 방법을 모르겠어요. 예를 들면 카카오웹툰처럼 페이지 이동을 하고 싶습니다. 도와주세요 🙏

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

포크코딩님의 프로필 사진

정확히 어떤 플로우를 원하시는지 모르겠으나, 인터셉팅 라우트 기능을 쓰시면 원하는 기능을 구현하실 수 있을거에요. ex) (..)new-tab/page.tsx

profile picture

익명

작성자

1월 20일

제가 설명이 부족했네요. 죄송합니다. 1. 새 탭을 링크로 열었을 때, 헤더에 커스텀한 뒤로가기 버튼을 클릭하면 history가 없어서 router.back()이 작동하지 않습니다. 2. 새 탭에서 URL로 직접 접근했을 때도, 헤더에 커스텀한 뒤로가기 버튼을 클릭하면 메인 페이지로 이동하고 싶습니다.

허니님의 프로필 사진

back 기능과 함께 뒤로가기 버튼을 만들 때 쉽게 마주하는 문제입니다. 한 가지 방법으로 이전 페이지가 자신의 사이트의 다른 페이지일 경우 back으로 동작하도록 하고, 다른 사이트일 경우 자신의 사이트의 메인 페이지(혹은 리스트 페이지)로 보내는 방법이 있습니다. 히스토리는 직접 접근할 수 없기 때문에 이전 페이지가 외부인지 내부인지를 판단하는 로직을 작성해야 합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 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로 검색 후 뒤로 가기 버튼을 클릭했을 때 메인 페이지로 이동하게 됩니다. 만약에 세션 스토리지 대신 다른 방식으로 저장하고 싶은 경우, 위의 예제를 참고하여 쿠키나 로컬 스토리지 등으로 변경하여 사용하실 수 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!