Use new Context API in React 16.3 (#5908)

* Use the new 16.3.0 context API.

* Export so others can use it.

* Only children again.

* Better default value

* Make Prompt use the new API

* Make Redirect use the new context API

* Export RouterContext in rrd

* Use RouterContext in Link

* Make StaticRouter inheritence work

* Directly consume context in Link.

* Update to final component-based context API

* Use create-react-context for BC

* Revert back to 16.2 to check BC and sync up with RRN.

* Update create-react-context and let it pass through.

* Fix packaging/build issues.

* im -> ex

* Downgrade babel-plugin-transform-react-remove-prop-types

0.4.16 has a bug. See oliviertassinari/babel-plugin-transform-react-remove-prop-types#160

Author: timdorr

packages/react-router-config/package-lock.json

@@ -35,7 +35,7 @@
     "babel-jest": "^23.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.15",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",

packages/react-router-config/package.json

@@ -2,6 +2,7 @@ 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);
@@ -22,17 +23,7 @@ class Link extends React.Component {
     replace: false
   };
 
-  static contextTypes = {
-    router: PropTypes.shape({
-      history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-        replace: PropTypes.func.isRequired,
-        createHref: PropTypes.func.isRequired
-      }).isRequired
-    }).isRequired
-  };
-
-  handleClick = event => {
+  handleClick = history => event => {
     if (this.props.onClick) this.props.onClick(event);
 
     if (
@@ -43,7 +34,6 @@ class Link extends React.Component {
     ) {
       event.preventDefault();
 
-      const { history } = this.context.router;
       const { replace, to } = this.props;
 
       if (replace) {
@@ -57,22 +47,30 @@ class Link extends React.Component {
   render() {
     const { replace, to, innerRef, ...props } = this.props; // eslint-disable-line no-unused-vars
 
-    invariant(
-      this.context.router,
-      "You should not use <Link> outside a <Router>"
-    );
-
     invariant(to !== undefined, 'You must specify the "to" property');
 
-    const { history } = this.context.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} />
+      <RouterContext.Consumer>
+        {({ 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(history)}
+              href={href}
+              ref={innerRef}
+            />
+          );
+        }}
+      </RouterContext.Consumer>
     );
   }
 }

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

@@ -0,0 +1,3 @@
+// Written in this round about way for babel-transform-imports
+import { RouterContext } from "react-router";
+export default RouterContext;

packages/react-router-dom/modules/RouterContext.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 context `router` is marked as required in `Link`"
-    );
+    expect(console.error.calls.count()).toBe(2);
   });
 
   it('throws with no "to" prop', () => {

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

@@ -7,6 +7,7 @@ export Prompt from "./Prompt";
 export Redirect from "./Redirect";
 export Route from "./Route";
 export Router from "./Router";
+export RouterContext from "./RouterContext";
 export StaticRouter from "./StaticRouter";
 export Switch from "./Switch";
 export generatePath from "./generatePath";