mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Delba de Oliveira
bd0da32a68
Closes: https://linear.app/vercel/issue/DOC-4540/migration-guides Redirects: https://github.com/vercel/front/pull/44177 Please merge this one first: https://github.com/vercel/next.js/pull/78189
24 lines
1.3 KiB
Plaintext
24 lines
1.3 KiB
Plaintext
---
|
|
title: '`NextRouter` was not mounted'
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
A component used `useRouter` outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the `useRouter` hook as they are not configured with Next.js' contexts.
|
|
|
|
This can also happen when you try to use the `useRouter` hook from `next/router` inside the `app` directory, as the App Router's `useRouter` from `next/navigation` has different behavior to the `useRouter` hook in `pages`.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
If used in a test, mock out the router by mocking the `next/router`'s `useRouter()` hook.
|
|
|
|
If used in the `app` directory, migrate to the new hooks imported from `next/navigation`.
|
|
|
|
If used in the `pages` directory, try to update the export to [`next/compat/router`](/docs/pages/api-reference/functions/use-router#the-nextcompatrouter-export). This is the same `useRouter` hook but does not throw this error, intended to be used while migrating from `pages` to `app`.
|
|
|
|
## Useful Links
|
|
|
|
- [next-router-mock](https://www.npmjs.com/package/next-router-mock)
|
|
- [App Router Migration](/docs/app/guides/migrating/app-router-migration#step-5-migrating-routing-hooks)
|
|
- [useRouter](/docs/app/api-reference/functions/use-router)
|