Directly consume context in Link.

Author: timdorr

packages/react-router-dom/modules/Link.js

@@ -10,27 +10,20 @@ const isModifiedEvent = event =>
 /**
  * The public API for rendering a history-aware <a>.
  */
-class InnerLink extends React.Component {
+class Link extends React.Component {
   static propTypes = {
     onClick: PropTypes.func,
     target: PropTypes.string,
     replace: PropTypes.bool,
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    router: PropTypes.shape({
-      history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-        replace: PropTypes.func.isRequired,
-        createHref: PropTypes.func.isRequired
-      }).isRequired
-    }).isRequired
+    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
   };
 
   static defaultProps = {
     replace: false
   };
 
-  handleClick = event => {
+  handleClick = history => event => {
     if (this.props.onClick) this.props.onClick(event);
 
     if (
@@ -41,7 +34,7 @@ class InnerLink extends React.Component {
     ) {
       event.preventDefault();
 
-      const { replace, to, router: { history } } = this.props;
+      const { replace, to } = this.props;
 
       if (replace) {
         history.replace(to);
@@ -52,33 +45,30 @@ class InnerLink extends React.Component {
   };
 
   render() {
-    const { replace, to, innerRef, router, ...props } = this.props; // eslint-disable-line no-unused-vars
-
-    invariant(
-      this.props.router,
-      "You should not use <Link> outside a <Router>"
-    );
+    const { replace, to, innerRef, ...props } = this.props; // eslint-disable-line no-unused-vars
 
     invariant(to !== undefined, 'You must specify the "to" property');
 
-    const { history } = router;
-    const location =
-      typeof to === "string"
-        ? createLocation(to, null, null, history.location)
-        : to;
+    return RouterContext.consume(({ router }) => {
+      invariant(router, "You should not use <Link> outside a <Router>");
+
+      const { history } = router;
+      const location =
+        typeof to === "string"
+          ? createLocation(to, null, null, history.location)
+          : to;
 
-    const href = history.createHref(location);
-    return (
-      <a {...props} onClick={this.handleClick} href={href} ref={innerRef} />
-    );
+      const href = history.createHref(location);
+      return (
+        <a
+          {...props}
+          onClick={this.handleClick(history)}
+          href={href}
+          ref={innerRef}
+        />
+      );
+    });
   }
 }
 
-export { InnerLink };
-
-const Link = props =>
-  RouterContext.consume(({ router }) => (
-    <InnerLink {...props} router={router} />
-  ));
-
 export default Link;

packages/react-router-dom/modules/NavLink.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Route from "./Route";
-import Link, { InnerLink } from "./Link";
+import Link from "./Link";
 
 /**
  * A <Link> wrapper that knows if it's "active" or not.
@@ -52,7 +52,7 @@ const NavLink = ({
 };
 
 NavLink.propTypes = {
-  to: InnerLink.propTypes.to,
+  to: Link.propTypes.to,
   exact: PropTypes.bool,
   strict: PropTypes.bool,
   location: PropTypes.object,

packages/react-router-dom/modules/__tests__/Link-test.js

@@ -51,10 +51,7 @@ describe("A <Link>", () => {
       ReactDOM.render(<Link to="/">link</Link>, node);
     }).toThrow(/You should not use <Link> outside a <Router>/);
 
-    expect(console.error.calls.count()).toBe(3);
-    expect(console.error.calls.argsFor(0)[0]).toContain(
-      "The prop `router` is marked as required in `InnerLink`"
-    );
+    expect(console.error.calls.count()).toBe(2);
   });
 
   it('throws with no "to" prop', () => {
@@ -73,7 +70,7 @@ describe("A <Link>", () => {
 
     expect(console.error.calls.count()).toBe(3);
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      "The prop `to` is marked as required in `InnerLink`"
+      "The prop `to` is marked as required in `Link`"
     );
   });