Getting next router was not mounted error

[warm thistle]

Im trying to pass variables into the url such as domain.com/result?VARIABLES_HERE when I transition to another page but I'm getting an error on this line:

import { useRouter } from "next/router";

const ResultPage = () => {
const { user } = useUser();
const router = useRouter();
const { query } = router;

[sturdy linden]

Hi @warm thistle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, it seems like you're encountering an error because you're using the useRouter hook from next/router in the app directory. In the app directory, you should use the new hooks imported from next/navigation instead of next/router.

Here's how you can modify your code:

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

const ResultPage = () => {
  const { user } = useUser();
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  // ...
}

In this code, useRouter is imported from next/navigation, and the pathname and query are obtained from the usePathname and useSearchParams hooks, respectively.

Please note that these new hooks are only supported in Client Components and cannot be used in Server Components.

For more details, you can refer to the Next.js documentation on migrating routing hooks (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: