새소식

반응형
REACT/Next.js

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

  • -
반응형

 

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

NextRouter was not mounted.

 

위 처럼 에러가 나는 경우는 useRouter를 next/router에서 가져와서 생긴 문제입니다.

 

NEXT.js 13 이상 버전은 next/router가 아닌 next/navigation에서 useRouter를 가져와야 합니다.

다음 코드를 참조해주세요.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}'use client';

 

 

또한 query 정보가 필요하다면  usePathname를 사용하면 됩니다.

반응형
'use client';

import { usePathname, useRouter } from 'next/navigation';

const pathname = usePathname();
const router = useRouter();

 

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.