javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): Keep a hold of previous routes when doing a redirect, closes #22053

Browse Source
This commit is contained in:
Ely Lucas
2020-09-08 19:58:00 -06:00
committed by GitHub
parent ba23ab3d66
commit 74af3cb50b
13 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/react-router/src/ReactRouter/IonRouter.tsx
View File

@ -41,7 +41,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
routeMangerContextState: RouteManagerContextState = {
canGoBack: () => this.locationHistory.canGoBack(),
clearOutlet: this.viewStack.clear,
getViewItemForTransition: this.viewStack.getViewItemForTransition,
findViewItemByPathname: this.viewStack.findViewItemByPathname,
getChildrenToRender: this.viewStack.getChildrenToRender,
goBack: () => this.handleNavigateBack(),
createViewItem: this.viewStack.createViewItem,
@ -154,7 +154,8 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
lastPathname: leavingLocationInfo.pathname,
pathname: location.pathname,
search: location.search,
params: this.props.match.params
params: this.props.match.params,
prevRouteLastPathname: leavingLocationInfo.lastPathname
};
if (isPushed) {
routeInfo.tab = leavingLocationInfo.tab;
@ -170,6 +171,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
// Make sure to set the lastPathname, etc.. to the current route so the page transitions out
const currentRouteInfo = this.locationHistory.current();
routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
routeInfo.pushedByRoute = currentRouteInfo?.pushedByRoute || routeInfo.pushedByRoute;
routeInfo.routeDirection = currentRouteInfo?.routeDirection || routeInfo.routeDirection;
routeInfo.routeAnimation = currentRouteInfo?.routeAnimation || routeInfo.routeAnimation;
@ -187,13 +189,13 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
}
handleNavigate(path: string, routeAction: RouteAction, routeDirection?: RouterDirection, routeAnimation?: AnimationBuilder, routeOptions?: any, tab?: string) {
this.incomingRouteParams = {
this.incomingRouteParams = Object.assign(this.incomingRouteParams || {}, {
routeAction,
routeDirection,
routeOptions,
routeAnimation,
tab
};
});
if (routeAction === 'push') {
this.props.history.push(path);
@ -213,7 +215,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
if (routeInfo.lastPathname === routeInfo.pushedByRoute) {
this.props.history.goBack();
} else {
this.props.history.replace(prevInfo.pathname + (prevInfo.search || ''));
this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back');
}
} else {
this.handleNavigate(defaultHref as string, 'pop', 'back');

10
packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
View File

@ -10,7 +10,7 @@ export class ReactRouterViewStack extends ViewStacks {
this.findViewItemByRouteInfo = this.findViewItemByRouteInfo.bind(this);
this.findLeavingViewItemByRouteInfo = this.findLeavingViewItemByRouteInfo.bind(this);
this.getChildrenToRender = this.getChildrenToRender.bind(this);
this.getViewItemForTransition = this.getViewItemForTransition.bind(this);
this.findViewItemByPathname = this.findViewItemByPathname.bind(this);
}
createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) {
@ -97,13 +97,13 @@ export class ReactRouterViewStack extends ViewStacks {
return viewItem;
}
findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string) {
const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, true);
findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
return viewItem;
}
getViewItemForTransition(pathname: string) {
const { viewItem } = this.findViewItemByPath(pathname, undefined, true, true);
findViewItemByPathname(pathname: string, outletId?: string) {
const { viewItem } = this.findViewItemByPath(pathname, outletId);
return viewItem;
}

19
packages/react-router/src/ReactRouter/StackManager.tsx
View File

@ -63,7 +63,11 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
setTimeout(() => this.handlePageTransition(routeInfo), 10);
} else {
let enteringViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
const leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
}
// Check if leavingViewItem should be unmounted
if (leavingViewItem) {
@ -76,7 +80,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
} else if (routeInfo.routeOptions?.unmount) {
leavingViewItem.mount = false;
}
}
const enteringRoute = matchRoute(this.ionRouterOutlet?.props.children, routeInfo) as React.ReactElement;
@ -95,12 +98,12 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
// If we have a leavingView but no entering view/route, we are probably leaving to
// another outlet, so hide this leavingView. We do it in a timeout to give time for a
// transition to finish.
setTimeout(() => {
if (leavingViewItem.ionPageElement) {
leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
}
}, 250);
// setTimeout(() => {
if (leavingViewItem.ionPageElement) {
leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
}
// }, 250);
}
this.forceUpdate();