Fix <Link> ref in React 15.6.2

Fixes #6954
remix-run · Sep 30, 2019 · 7f63ffe · 7f63ffe
1 parent e4e44ae
commit 7f63ffe
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/packages/react-router-dom/modules/Link.js b/packages/react-router-dom/modules/Link.js
@@ -16,33 +16,47 @@ function isModifiedEvent(event) {
 }
 
 const LinkAnchor = forwardRef(
-  ({ innerRef, navigate, onClick, ...rest }, forwardedRef) => {
+  (
+    {
+      innerRef, // TODO: deprecate
+      navigate,
+      onClick,
+      ...rest
+    },
+    forwardedRef
+  ) => {
     const { target } = rest;
 
-    return (
-      <a
-        {...rest}
-        ref={forwardedRef || innerRef}
-        onClick={event => {
-          try {
-            if (onClick) onClick(event);
-          } catch (ex) {
-            event.preventDefault();
-            throw ex;
-          }
-
-          if (
-            !event.defaultPrevented && // onClick prevented default
-            event.button === 0 && // ignore everything but left clicks
-            (!target || target === "_self") && // let browser handle "target=_blank" etc.
-            !isModifiedEvent(event) // ignore clicks with modifier keys
-          ) {
-            event.preventDefault();
-            navigate();
-          }
-        }}
-      />
-    );
+    let props = {
+      ...rest,
+      onClick: event => {
+        try {
+          if (onClick) onClick(event);
+        } catch (ex) {
+          event.preventDefault();
+          throw ex;
+        }
+
+        if (
+          !event.defaultPrevented && // onClick prevented default
+          event.button === 0 && // ignore everything but left clicks
+          (!target || target === "_self") && // let browser handle "target=_blank" etc.
+          !isModifiedEvent(event) // ignore clicks with modifier keys
+        ) {
+          event.preventDefault();
+          navigate();
+        }
+      }
+    };
+
+    // React 15 compat
+    if (forwardRefShim !== forwardRef) {
+      props.ref = forwardedRef || innerRef;
+    } else {
+      props.ref = innerRef;
+    }
+
+    return <a {...props} />;
   }
 );
 
@@ -55,7 +69,13 @@ if (__DEV__) {
  */
 const Link = forwardRef(
   (
-    { component = LinkAnchor, replace, to, innerRef, ...rest },
+    {
+      component = LinkAnchor,
+      replace,
+      to,
+      innerRef, // TODO: deprecate
+      ...rest
+    },
     forwardedRef
   ) => {
     return (
@@ -86,7 +106,6 @@ const Link = forwardRef(
           if (forwardRefShim !== forwardRef) {
             props.ref = forwardedRef || innerRef;
           } else {
-            // TODO: deprecate
             props.innerRef = innerRef;
           }
 

diff --git a/packages/react-router-dom/modules/NavLink.js b/packages/react-router-dom/modules/NavLink.js
@@ -32,7 +32,7 @@ const NavLink = forwardRef(
       strict,
       style: styleProp,
       to,
-      innerRef,
+      innerRef, // TODO: deprecate
       ...rest
     },
     forwardedRef
@@ -80,7 +80,6 @@ const NavLink = forwardRef(
           if (forwardRefShim !== forwardRef) {
             props.ref = forwardedRef || innerRef;
           } else {
-            // TODO: deprecate
             props.innerRef = innerRef;
           }