feat: forward ref for react-router link

oedotme · Jul 8, 2024 · bbd27cd · bbd27cd
1 parent e2d48c1
commit bbd27cd
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/react-router/src/client/components.tsx b/packages/react-router/src/client/components.tsx
@@ -1,15 +1,21 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { generatePath, Link, Navigate } from 'react-router-dom'
 import { LinkProps, To } from './types'
 
+type LinkRef = React.ForwardedRef<HTMLAnchorElement>
+
 export const components = <Path extends string, Params extends Record<string, any>>() => {
   return {
-    Link: <P extends Path | To<Path>>({ to, params, ...props }: LinkProps<P, Params>) => {
+    Link: forwardRef(<P extends Path | To<Path>>({ to, params, ...props }: LinkProps<P, Params>, ref: LinkRef) => {
       const path = generatePath(typeof to === 'string' ? to : to.pathname, params || ({} as any))
       return (
-        <Link {...props} to={typeof to === 'string' ? path : { pathname: path, search: to.search, hash: to.hash }} />
+        <Link
+          ref={ref}
+          {...props}
+          to={typeof to === 'string' ? path : { pathname: path, search: to.search, hash: to.hash }}
+        />
       )
-    },
+    }),
     Navigate: <P extends Path | To<Path>>({ to, params, ...props }: LinkProps<P, Params>) => {
       const path = generatePath(typeof to === 'string' ? to : to.pathname, params || ({} as any))
       return (