{"record":{"id":"f77b2c74a8771080","repo":"vercel/next.js","slug":"onclick-was-passed-to-link-with-href-of-f","errorCode":null,"errorMessage":"\"onClick\" was passed to <Link> with `href` of `${formattedHref}` but \"legacyBehavior\" was set. The legacy behavior requires onClick be set on the child of next/link","messagePattern":"\"onClick\" was passed to <Link> with `href` of `(.+?)` but \"legacyBehavior\" was set\\. The legacy behavior requires onClick be set on the child of next/link","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/next/src/client/app-dir/link.tsx","lineNumber":562,"sourceCode":"            `Dynamic href \\`${href}\\` found in <Link> while using the \\`/app\\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href`\n          )\n        }\n      }\n    }\n  }\n\n  // This will return the first child, if multiple are provided it will throw an error\n  let child: any\n  if (legacyBehavior) {\n    if ((children as any)?.$$typeof === Symbol.for('react.lazy')) {\n      throw new Error(\n        `\\`<Link legacyBehavior>\\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \\`<a>\\` tag.`\n      )\n    }\n\n    if (process.env.NODE_ENV === 'development') {\n      if (onClick) {\n        console.warn(\n          `\"onClick\" was passed to <Link> with \\`href\\` of \\`${formattedHref}\\` but \"legacyBehavior\" was set. The legacy behavior requires onClick be set on the child of next/link`\n        )\n      }\n      if (onMouseEnterProp) {\n        console.warn(\n          `\"onMouseEnter\" was passed to <Link> with \\`href\\` of \\`${formattedHref}\\` but \"legacyBehavior\" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`\n        )\n      }\n      try {\n        child = React.Children.only(children)\n      } catch (err) {\n        if (!children) {\n          throw new Error(\n            `No children were passed to <Link> with \\`href\\` of \\`${formattedHref}\\` but one child is required https://nextjs.org/docs/messages/link-no-children`\n          )\n        }\n        throw new Error(\n          `Multiple children were passed to <Link> with \\`href\\` of \\`${formattedHref}\\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +","sourceCodeStart":544,"sourceCodeEnd":580,"githubUrl":"https://github.com/vercel/next.js/blob/0eb377541648e63402a47b38fee00a8d0ce8f8f1/packages/next/src/client/app-dir/link.tsx#L544-L580","documentation":"In app-router LinkComponent with legacyBehavior, a dev-only warning fires when an onClick prop was set directly on the <Link>; the legacy contract requires handlers on the child component, since the Link clones props onto the child rather than rendering an <a> itself.","triggerScenarios":"Thrown at packages/next/src/client/app-dir/link.tsx:562 when the library encounters an invalid state.","commonSituations":"See trigger scenarios.","solutions":["With legacyBehavior, put onClick on the child <a> element, or remove legacyBehavior and keep onClick on <Link>."],"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"}