Next.js 에서 alert창을 띄우고 확인 버튼을 눌렀을 때 navigate 하는 법

💡문제

다음과 같은 코드에서 취소하기 버튼을 누르면 href에 적힌 링크로 가도록 만들고 싶었다.

//main.tsx
import * as S from './style';
<S.Btns>
  <S.Cancle href="/">취소하기</S.Cancle>
  <S.Submit type='submit' disabled={isSubmitting}>등록하기</S.Submit>
</S.Btns>

// style.ts

import Link from 'next/link';
export const Cancle = styled(Link)`
  width: 10vw;
  border: 1px solid #4285F4;
  color: #4285F4;
  background-color: white;
  border-radius: 12px;
  padding: 1.3vh 1.4vw;
  margin-right: 1vw;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  justify-content: center;
  font-size: 0.9rem;
`;

 

✍️시도

  import * as S from './style';
  import { useNavigate } from 'react-router-dom';
  
  const navigate = useNavigate();
  //cancle
  const onHandleCancle = () => {
    if(confirm('정말 취소하시겠습니까?')){
      navigate('/')
    }else{
      console.log()
    }
  }
  
  
<S.Btns>
  <S.Cancle onClick={onHandleCancle}>취소하기</S.Cancle>
  <S.Submit type='submit' disabled={isSubmitting}>등록하기</S.Submit>
</S.Btns>

Cancle Component를 div로 바꾸고 onClick 이벤트로 넣으려고 했다.

 

Error: useNavigate() may be used only in the context of a <Router> component.

useNavigate()는 Router 컴포넌트에서만 사용할 수 있다는 것. 하지만 우리는 next.js 를 사용중이기때문에 Router를 쓰고 있지않아 다른 방법을 찾아야했다.

 

💪🏻해결

import {useRouter} from 'next/router'
...
const router = useRouter();

//cancle
const onHandleCancle = () => {
if(confirm('정말 취소하시겠습니까?')){
  router.push('/')
}else{
  console.log()
}
}
  
<S.Btns>
  <S.Cancle onClick={onHandleCancle}>취소하기</S.Cancle>
  <S.Submit type='submit' disabled={isSubmitting}>등록하기</S.Submit>
</S.Btns>

useRouter 를 사용해서 해결했다!

참고링크