Search code examples
next.jsnavigationslug

Next.js UseRouter not mounted

I'm using Next.JS and i want to pass a slug to my site.

This is the code that i have:

'use client';
import { useRouter } from 'next/router';

export default function Home() {
    const router = useRouter();
    const { slug } = router.query;

    return (
        <p>Post: {slug}</p>
    )
}

However, upon doing this i receive an error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

I am not finding much documentation on this, the only thing it leads to is a next-router-mock package. However, i don't know if this is the right thing for me.

I tried using next/navigation, but i can't seem to find anything related to a router. I am not sure what the alternative for it is. I am new to next.js, so i am sorry if this question seems obvious.

Thanks in advance.

Solution

  • Okay, i figured it out.

    UseParams was what i was looking for https://nextjs.org/docs/app/api-reference/functions/use-params

    Thanks for the reply :^)