Separate history object to its own context (#7103)

Author: illuminist

packages/react-router-native/BackButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { BackHandler } from "react-native";
 
-import { __RouterContext as RouterContext } from "react-router";
+import { __HistoryContext as HistoryContext } from "react-router";
 
 class BackButton extends React.PureComponent {
   handleBack = () => {
@@ -23,12 +23,12 @@ class BackButton extends React.PureComponent {
 
   render() {
     return (
-      <RouterContext.Consumer>
-        {context => {
-          this.history = context.history;
+      <HistoryContext.Consumer>
+        {history => {
+          this.history = history;
           return this.props.children || null;
         }}
-      </RouterContext.Consumer>
+      </HistoryContext.Consumer>
     );
   }
 }

packages/react-router-native/DeepLinking.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Linking } from "react-native";
 
-import { __RouterContext as RouterContext } from "react-router";
+import { __HistoryContext as HistoryContext } from "react-router";
 
 const protocolAndSlashes = /.*?:\/\//g;
 
@@ -27,12 +27,12 @@ class DeepLinking extends React.PureComponent {
 
   render() {
     return (
-      <RouterContext.Consumer>
-        {context => {
-          this.history = context.history;
+      <HistoryContext.Consumer>
+        {history => {
+          this.history = history;
           return this.props.children || null;
         }}
-      </RouterContext.Consumer>
+      </HistoryContext.Consumer>
     );
   }
 }

packages/react-router-native/Link.js

@@ -2,7 +2,7 @@ import React from "react";
 import { TouchableHighlight } from "react-native";
 import PropTypes from "prop-types";
 
-import { __RouterContext as RouterContext } from "react-router";
+import { __HistoryContext as HistoryContext } from "react-router";
 
 export default class Link extends React.PureComponent {
   static defaultProps = {
@@ -28,14 +28,14 @@ export default class Link extends React.PureComponent {
     const { component: Component, to, replace, ...rest } = this.props;
 
     return (
-      <RouterContext.Consumer>
-        {context => (
+      <HistoryContext.Consumer>
+        {history => (
           <Component
             {...rest}
-            onPress={event => this.handlePress(event, context.history)}
+            onPress={event => this.handlePress(event, history)}
           />
         )}
-      </RouterContext.Consumer>
+      </HistoryContext.Consumer>
     );
   }
 }

packages/react-router/modules/HistoryContext.js

@@ -0,0 +1,4 @@
+import createNamedContext from "./createNameContext";
+
+const historyContext = /*#__PURE__*/ createNamedContext("Router-History");
+export default historyContext;

packages/react-router/modules/Router.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import warning from "tiny-warning";
 
+import HistoryContext from "./HistoryContext.js";
 import RouterContext from "./RouterContext.js";
 
 /**
@@ -53,14 +54,18 @@ class Router extends React.PureComponent {
   render() {
     return (
       <RouterContext.Provider
-        children={this.props.children || null}
         value={{
           history: this.props.history,
           location: this.state.location,
           match: Router.computeRootMatch(this.state.location.pathname),
           staticContext: this.props.staticContext
         }}
-      />
+      >
+        <HistoryContext.Provider
+          children={this.props.children || null}
+          value={this.props.history}
+        />
+      </RouterContext.Provider>
     );
   }
 }

packages/react-router/modules/createNameContext.js

@@ -0,0 +1,11 @@
+// TODO: Replace with React.createContext once we can assume React 16+
+import createContext from "mini-create-react-context";
+
+const createNamedContext = name => {
+  const context = createContext();
+  context.displayName = name;
+
+  return context;
+};
+
+export default createNamedContext;

packages/react-router/modules/hooks.js

@@ -2,6 +2,7 @@ import React from "react";
 import invariant from "tiny-invariant";
 
 import Context from "./RouterContext.js";
+import HistoryContext from "./HistoryContext.js";
 import matchPath from "./matchPath.js";
 
 const useContext = React.useContext;
@@ -14,7 +15,7 @@ export function useHistory() {
     );
   }
 
-  return useContext(Context).history;
+  return useContext(HistoryContext);
 }
 
 export function useLocation() {

packages/react-router/modules/index.js

@@ -35,4 +35,5 @@ export { default as withRouter } from "./withRouter.js";
 import { useHistory, useLocation, useParams, useRouteMatch } from "./hooks.js";
 export { useHistory, useLocation, useParams, useRouteMatch };
 
+export { default as __HistoryContext } from "./HistoryContext.js";
 export { default as __RouterContext } from "./RouterContext.js";