{"record":{"id":"556bcdee2c9c1f2d","repo":"vercel/next.js","slug":"invariant-expected-app-router-to-be-mounted","errorCode":null,"errorMessage":"invariant expected app router to be mounted","messagePattern":"invariant expected app router to be mounted","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/client/components/navigation.ts","lineNumber":169,"sourceCode":" * @example\n * ```ts\n * \"use client\"\n * import { useRouter } from 'next/navigation'\n *\n * export default function Page() {\n *  const router = useRouter()\n *  // ...\n *  router.push('/dashboard') // Navigate to /dashboard\n * }\n * ```\n *\n * Read more: [Next.js Docs: `useRouter`](https://nextjs.org/docs/app/api-reference/functions/use-router)\n */\n// Client components API\nexport function useRouter(): AppRouterInstance {\n  const router = useContext(AppRouterContext)\n  if (router === null) {\n    throw new Error('invariant expected app router to be mounted')\n  }\n\n  // Read the bfcacheId of the closest CacheNode and merge it into the\n  // returned router instance. This is contextual: callers in a shared\n  // layout get the layout's id; callers in a leaf segment get the leaf's.\n  // The id is stored on the CacheNode as a number and materialized as a\n  // string here. The format mirrors React's `useId()` (e.g. `_r_0_`) with\n  // a `b` prefix, so the id can be safely concatenated with other keys\n  // without collision.\n  const layout = useContext(LayoutRouterContext)\n  const bfcacheIdNumber = layout?.parentCacheNode.bfcacheId ?? 0\n  return useMemo<AppRouterInstance>(\n    () => ({\n      back: router.back,\n      forward: router.forward,\n      refresh: router.refresh,\n      hmrRefresh: router.hmrRefresh,\n      push: router.push,","sourceCodeStart":151,"sourceCodeEnd":187,"githubUrl":"https://github.com/vercel/next.js/blob/0eb377541648e63402a47b38fee00a8d0ce8f8f1/packages/next/src/client/components/navigation.ts#L151-L187","documentation":"Context invariant in the useRouter client hook: useContext(AppRouterContext) returned null, meaning the component calling useRouter is not rendered inside the App Router provider tree. Typical causes are using next/navigation's useRouter in a Pages Router component or mounting outside the app directory tree.","triggerScenarios":"App router hooks are used before the app router instance is mounted.","commonSituations":"Calling useRouter/usePathname outside the app router tree or during an unexpected render phase.","solutions":["Ensure navigation hooks (useRouter etc.) are only used under the app router tree; this invariant failing usually means the hook ran outside a mounted app router — upgrade Next.js or check component placement."],"exampleFix":null,"handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"0eb377541648e63402a47b38fee00a8d0ce8f8f1","analyzedAt":"2026-08-19T02:10:13.922Z","contentChangedAt":"2026-08-19T02:10:13.922Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}