diff --git a/packages/react-router-native/BackButton.js b/packages/react-router-native/BackButton.js
index b462b8c86..4aa7f95d6 100644
--- a/packages/react-router-native/BackButton.js
+++ b/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.Component {
handleBack = () => {
@@ -23,12 +23,12 @@ class BackButton extends React.Component {
render() {
return (
-
- {context => {
- this.history = context.history;
+
+ {history => {
+ this.history = history;
return this.props.children || null;
}}
-
+
);
}
}
diff --git a/packages/react-router-native/DeepLinking.js b/packages/react-router-native/DeepLinking.js
index 414e6511c..a80d9d5ae 100644
--- a/packages/react-router-native/DeepLinking.js
+++ b/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.Component {
render() {
return (
-
- {context => {
- this.history = context.history;
+
+ {history => {
+ this.history = history;
return this.props.children || null;
}}
-
+
);
}
}
diff --git a/packages/react-router-native/Link.js b/packages/react-router-native/Link.js
index a8f5590ba..5d17f66a4 100644
--- a/packages/react-router-native/Link.js
+++ b/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.Component {
static defaultProps = {
@@ -28,14 +28,14 @@ export default class Link extends React.Component {
const { component: Component, to, replace, ...rest } = this.props;
return (
-
- {context => (
+
+ {history => (
this.handlePress(event, context.history)}
+ onPress={event => this.handlePress(event, history)}
/>
)}
-
+
);
}
}
diff --git a/packages/react-router/modules/HistoryContext.js b/packages/react-router/modules/HistoryContext.js
new file mode 100644
index 000000000..3972fcaab
--- /dev/null
+++ b/packages/react-router/modules/HistoryContext.js
@@ -0,0 +1,4 @@
+import createNamedContext from "./createNameContext";
+
+const historyContext = /*#__PURE__*/ createNamedContext("Router-History");
+export default historyContext;
diff --git a/packages/react-router/modules/Router.js b/packages/react-router/modules/Router.js
index 40e777c0e..bf87ad2a2 100644
--- a/packages/react-router/modules/Router.js
+++ b/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.Component {
render() {
return (
+ >
+
+
);
}
}
diff --git a/packages/react-router/modules/createNameContext.js b/packages/react-router/modules/createNameContext.js
new file mode 100644
index 000000000..36e1baaac
--- /dev/null
+++ b/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;
diff --git a/packages/react-router/modules/hooks.js b/packages/react-router/modules/hooks.js
index c95755b76..a65543bb0 100644
--- a/packages/react-router/modules/hooks.js
+++ b/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() {
diff --git a/packages/react-router/modules/index.js b/packages/react-router/modules/index.js
index a6ab28712..1ca8537b7 100644
--- a/packages/react-router/modules/index.js
+++ b/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";