Update to final component-based context API

Author: timdorr

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

@@ -49,25 +49,29 @@ class Link extends React.Component {
 
     invariant(to !== undefined, 'You must specify the "to" property');
 
-    return RouterContext.consume(({ router }) => {
-      invariant(router, "You should not use <Link> outside a <Router>");
+    return (
+      <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 { 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}
-        />
-      );
-    });
+          const href = history.createHref(location);
+          return (
+            <a
+              {...props}
+              onClick={this.handleClick(history)}
+              href={href}
+              ref={innerRef}
+            />
+          );
+        }}
+      </RouterContext.Consumer>
+    );
   }
 }
 

packages/react-router/modules/Prompt.js

@@ -62,9 +62,10 @@ class InnerPrompt extends React.Component {
   }
 }
 
-const Prompt = props =>
-  RouterContext.consume(({ router }) => (
-    <InnerPrompt {...props} router={router} />
-  ));
+const Prompt = props => (
+  <RouterContext.Consumer>
+    {({ router }) => <InnerPrompt {...props} router={router} />}
+  </RouterContext.Consumer>
+);
 
 export default Prompt;

packages/react-router/modules/Redirect.js

@@ -93,9 +93,10 @@ class InnerRedirect extends React.Component {
   }
 }
 
-const Redirect = props =>
-  RouterContext.consume(({ router }) => (
-    <InnerRedirect {...props} router={router} />
-  ));
+const Redirect = props => (
+  <RouterContext.Consumer>
+    {({ router }) => <InnerRedirect {...props} router={router} />}
+  </RouterContext.Consumer>
+);
 
 export default Redirect;

packages/react-router/modules/Route.js

@@ -135,13 +135,18 @@ class InnerRoute extends React.Component {
   }
 
   render() {
-    return RouterContext.provide(this.getChildContext(), this.renderChildren());
+    return (
+      <RouterContext.Provider value={this.getChildContext()}>
+        {this.renderChildren()}
+      </RouterContext.Provider>
+    );
   }
 }
 
-const Route = props =>
-  RouterContext.consume(({ router }) => (
-    <InnerRoute {...props} router={router} />
-  ));
+const Route = props => (
+  <RouterContext.Consumer>
+    {({ router }) => <InnerRoute {...props} router={router} />}
+  </RouterContext.Consumer>
+);
 
 export default Route;

packages/react-router/modules/Router.js

@@ -75,9 +75,10 @@ class Router extends React.Component {
 
   render() {
     const { children } = this.props;
-    return RouterContext.provide(
-      this.getChildContext(),
-      children ? React.Children.only(children) : null
+    return (
+      <RouterContext.Provider value={this.getChildContext()}>
+        {children ? React.Children.only(children) : null}
+      </RouterContext.Provider>
     );
   }
 }

packages/react-router/modules/RouterContext.js

@@ -1,5 +1,5 @@
 import React from "react";
 
-const RouterContext = React.unstable_createContext({});
+const RouterContext = React.createContext({});
 
 export default RouterContext;

packages/react-router/modules/Switch.js

@@ -68,9 +68,10 @@ class InnerSwitch extends React.Component {
   }
 }
 
-const Switch = props =>
-  RouterContext.consume(({ router }) => (
-    <InnerSwitch {...props} router={router} />
-  ));
+const Switch = props => (
+  <RouterContext.Consumer>
+    {({ router }) => <InnerSwitch {...props} router={router} />}
+  </RouterContext.Consumer>
+);
 
 export default Switch;

packages/react-router/modules/__tests__/Router-test.js

@@ -51,11 +51,14 @@ describe("A <Router>", () => {
 
   describe("context", () => {
     let rootContext;
-    const ContextChecker = () =>
-      RouterContext.consume(context => {
-        rootContext = context;
-        return null;
-      });
+    const ContextChecker = () => (
+      <RouterContext.Consumer>
+        {context => {
+          rootContext = context;
+          return null;
+        }}
+      </RouterContext.Consumer>
+    );
 
     afterEach(() => {
       rootContext = undefined;