From 4da5216b4f65f3d893cc81ebee77261835218f7f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 14 May 2021 09:03:15 -0400 Subject: [PATCH] fix(react): support history@5 in preparation for react router 6 (#23297) resolves #23294 --- .../src/ReactRouter/IonReactHashRouter.tsx | 12 ++++++++++- .../src/ReactRouter/IonReactMemoryRouter.tsx | 12 ++++++++++- .../src/ReactRouter/IonReactRouter.tsx | 18 +++++++++++++---- .../src/ReactRouter/IonRouter.tsx | 20 +++++++++++++++++-- 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx index 491e8368bee..33e22c231b8 100644 --- a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx @@ -25,9 +25,19 @@ export class IonReactHashRouter extends React.Component this.registerHistoryListener = this.registerHistoryListener.bind(this); } + /** + * history@4.x passes separate location and action + * params. history@5.x passes location and action + * together as a single object. + * TODO: If support for React Router <=5 is dropped + * this logic is no longer needed. We can just assume + * a single object with both location and action. + */ handleHistoryChange(location: HistoryLocation, action: HistoryAction) { + const locationValue = (location as any).location || location; + const actionValue = (location as any).action || action; if (this.historyListenHandler) { - this.historyListenHandler(location, action); + this.historyListenHandler(locationValue, actionValue); } } diff --git a/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx index c050287b523..d36142a00cd 100644 --- a/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx @@ -19,9 +19,19 @@ export class IonReactMemoryRouter extends React.Component { this.registerHistoryListener = this.registerHistoryListener.bind(this); } + /** + * history@4.x passes separate location and action + * params. history@5.x passes location and action + * together as a single object. + * TODO: If support for React Router <=5 is dropped + * this logic is no longer needed. We can just assume + * a single object with both location and action. + */ handleHistoryChange(location: HistoryLocation, action: HistoryAction) { - if (this.historyListenHandler) { - this.historyListenHandler(location, action); - } - } + const locationValue = (location as any).location || location; + const actionValue = (location as any).action || action; + if (this.historyListenHandler) { + this.historyListenHandler(locationValue, actionValue); + } + } registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) { this.historyListenHandler = cb; diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx index 61a57a303a6..09144be1a4a 100644 --- a/packages/react-router/src/ReactRouter/IonRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonRouter.tsx @@ -203,8 +203,16 @@ class IonRouterInner extends React.PureComponent { this.incomingRouteParams = undefined; } + /** + * history@4.x uses goBack(), history@5.x uses back() + * TODO: If support for React Router <=5 is dropped + * this logic is no longer needed. We can just + * assume back() is available. + */ handleNativeBack() { - this.props.history.goBack(); + const history = this.props.history as any; + const goBack = history.goBack || history.back; + goBack(); } handleNavigate( @@ -256,7 +264,15 @@ class IonRouterInner extends React.PureComponent { routeInfo.tab === '' && prevInfo.tab === '' ) ) { - this.props.history.goBack(); + /** + * history@4.x uses goBack(), history@5.x uses back() + * TODO: If support for React Router <=5 is dropped + * this logic is no longer needed. We can just + * assume back() is available. + */ + const history = this.props.history as any; + const goBack = history.goBack || history.back; + goBack(); } else { this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back'); }