diff --git a/packages/next/src/client/app-dir/link.tsx b/packages/next/src/client/app-dir/link.tsx index 753ce7f7c1bd7..5b5a812393e53 100644 --- a/packages/next/src/client/app-dir/link.tsx +++ b/packages/next/src/client/app-dir/link.tsx @@ -204,6 +204,24 @@ function formatStringOrUrl(urlObjOrString: UrlObject | string): string { return formatUrl(urlObjOrString) } +/** + * Returns the ref of a React element handling differences between React 19 and older versions. + * It will throw runtime error if the element is not a valid React element. + * @param element React.ReactElement + * @returns React.Ref | undefined + */ +function getReactElementRef( + element: React.ReactElement +): React.Ref | undefined { + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions + if (parseInt(React.version, 10) >= 19) { + return (element.props as any).ref + } + // @ts-expect-error element.ref is not included in the ReactElement type + // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189 + return element.ref +} + /** * A React component that extends the HTML `` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) * and client-side navigation between routes. @@ -440,7 +458,7 @@ const Link = React.forwardRef( } const childRef: any = legacyBehavior - ? child && typeof child === 'object' && child.ref + ? getReactElementRef(child) : forwardedRef const [setIntersectionRef, isVisible, resetVisible] = useIntersection({ diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx index ee7eab27195f5..52052d6323fae 100644 --- a/packages/next/src/client/link.tsx +++ b/packages/next/src/client/link.tsx @@ -242,6 +242,24 @@ function formatStringOrUrl(urlObjOrString: UrlObject | string): string { return formatUrl(urlObjOrString) } +/** + * Returns the ref of a React element handling differences between React 19 and older versions. + * It will throw runtime error if the element is not a valid React element. + * @param element React.ReactElement + * @returns React.Ref | undefined + */ +function getReactElementRef( + element: React.ReactElement +): React.Ref | undefined { + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions + if (parseInt(React.version, 10) >= 19) { + return (element.props as any).ref + } + // @ts-expect-error element.ref is not included in the ReactElement type + // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189 + return element.ref +} + /** * A React component that extends the HTML `` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) * and client-side navigation between routes. @@ -458,7 +476,7 @@ const Link = React.forwardRef( } const childRef: any = legacyBehavior - ? child && typeof child === 'object' && child.ref + ? getReactElementRef(child) : forwardedRef const [setIntersectionRef, isVisible, resetVisible] = useIntersection({