Use RouterContext in Link

Author: timdorr

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

@@ -2,27 +2,21 @@ import React from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { createLocation } from "history";
+import RouterContext from "./RouterContext";
 
 const isModifiedEvent = event =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 
 /**
  * The public API for rendering a history-aware <a>.
  */
-class Link extends React.Component {
+class InnerLink 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])
-  };
-
-  static defaultProps = {
-    replace: false
-  };
-
-  static contextTypes = {
+    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     router: PropTypes.shape({
       history: PropTypes.shape({
         push: PropTypes.func.isRequired,
@@ -32,6 +26,10 @@ class Link extends React.Component {
     }).isRequired
   };
 
+  static defaultProps = {
+    replace: false
+  };
+
   handleClick = event => {
     if (this.props.onClick) this.props.onClick(event);
 
@@ -43,8 +41,7 @@ class Link extends React.Component {
     ) {
       event.preventDefault();
 
-      const { history } = this.context.router;
-      const { replace, to } = this.props;
+      const { replace, to, router: { history } } = this.props;
 
       if (replace) {
         history.replace(to);
@@ -55,16 +52,16 @@ class Link extends React.Component {
   };
 
   render() {
-    const { replace, to, innerRef, ...props } = this.props; // eslint-disable-line no-unused-vars
+    const { replace, to, innerRef, router, ...props } = this.props; // eslint-disable-line no-unused-vars
 
     invariant(
-      this.context.router,
+      this.props.router,
       "You should not use <Link> outside a <Router>"
     );
 
     invariant(to !== undefined, 'You must specify the "to" property');
 
-    const { history } = this.context.router;
+    const { history } = router;
     const location =
       typeof to === "string"
         ? createLocation(to, null, null, history.location)
@@ -77,4 +74,11 @@ class Link extends React.Component {
   }
 }
 
+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 from "./Link";
+import Link, { InnerLink } from "./Link";
 
 /**
  * A <Link> wrapper that knows if it's "active" or not.
@@ -52,7 +52,7 @@ const NavLink = ({
 };
 
 NavLink.propTypes = {
-  to: Link.propTypes.to,
+  to: InnerLink.propTypes.to,
   exact: PropTypes.bool,
   strict: PropTypes.bool,
   location: PropTypes.object,

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

@@ -53,7 +53,7 @@ describe("A <Link>", () => {
 
     expect(console.error.calls.count()).toBe(3);
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      "The context `router` is marked as required in `Link`"
+      "The prop `router` is marked as required in `InnerLink`"
     );
   });
 
@@ -73,7 +73,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 `Link`"
+      "The prop `to` is marked as required in `InnerLink`"
     );
   });