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";