Add <Link component> prop

See #5437
remix-run · Nov 7, 2018 · 35ce17d · 35ce17d
1 parent e6e4500
commit 35ce17d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/packages/react-router-dom/.size-snapshot.json b/packages/react-router-dom/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "esm/react-router-dom.js": {
-    "bundled": 7978,
-    "minified": 4880,
-    "gzipped": 1618,
+    "bundled": 8050,
+    "minified": 4910,
+    "gzipped": 1631,
     "treeshaked": {
       "rollup": {
-        "code": 1250,
+        "code": 1280,
         "import_statements": 417
       },
       "webpack": {
-        "code": 3322
+        "code": 3352
       }
     }
   },
   "umd/react-router-dom.js": {
-    "bundled": 159709,
-    "minified": 57597,
-    "gzipped": 16540
+    "bundled": 159774,
+    "minified": 57627,
+    "gzipped": 16548
   },
   "umd/react-router-dom.min.js": {
-    "bundled": 97476,
-    "minified": 34651,
-    "gzipped": 10216
+    "bundled": 97541,
+    "minified": 34681,
+    "gzipped": 10224
   }
 }
diff --git a/packages/react-router-dom/modules/Link.js b/packages/react-router-dom/modules/Link.js
@@ -13,6 +13,7 @@ function isModifiedEvent(event) {
  */
 class Link extends React.Component {
   static defaultProps = {
+    component: "a",
     replace: false
   };
 
@@ -34,7 +35,7 @@ class Link extends React.Component {
   }
 
   render() {
-    const { innerRef, replace, to, ...rest } = this.props; // eslint-disable-line no-unused-vars
+    const { component, innerRef, replace, to, ...rest } = this.props; // eslint-disable-line no-unused-vars
 
     return (
       <RouterContext.Consumer>
@@ -47,14 +48,12 @@ class Link extends React.Component {
               : to;
           const href = location ? context.history.createHref(location) : "";
 
-          return (
-            <a
-              {...rest}
-              onClick={event => this.handleClick(event, context.history)}
-              href={href}
-              ref={innerRef}
-            />
-          );
+          return React.createElement(component, {
+            ...rest,
+            href,
+            onClick: event => this.handleClick(event, context.history),
+            ref: innerRef
+          });
         }}
       </RouterContext.Consumer>
     );

diff --git a/packages/react-router-dom/modules/__tests__/Link-test.js b/packages/react-router-dom/modules/__tests__/Link-test.js
@@ -91,12 +91,10 @@ describe("A <Link>", () => {
     });
   });
 
-  it("exposes its ref via an innerRef prop", done => {
+  it("exposes its ref via an innerRef prop", () => {
+    let refNode;
     function refCallback(n) {
-      if (n) {
-        expect(n.tagName).toEqual("A");
-        done();
-      }
+      refNode = n;
     }
 
     renderStrict(
@@ -107,6 +105,30 @@ describe("A <Link>", () => {
       </MemoryRouter>,
       node
     );
+
+    expect(refNode).not.toBe(undefined);
+    expect(refNode.tagName).toEqual("A");
+  });
+
+  it("uses a custom component prop", () => {
+    let linkProps;
+    function MyComponent(p) {
+      linkProps = p;
+      return null;
+    }
+
+    renderStrict(
+      <MemoryRouter>
+        <Link component={MyComponent} to="/">
+          link
+        </Link>
+      </MemoryRouter>,
+      node
+    );
+
+    expect(linkProps).not.toBe(undefined);
+    expect(linkProps.onClick).toBeInstanceOf(Function);
+    expect(linkProps.href).toEqual("/");
   });
 
   describe("with a <HashRouter>", () => {