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();