javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +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;
}

11
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(() => {
// setTimeout(() => {
if (leavingViewItem.ionPageElement) {
leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
}
}, 250);
// }, 250);
}
this.forceUpdate();

22
packages/react-router/test-app/cypress/integration/routing.spec.js
View File

@ -269,6 +269,28 @@ describe('Routing Tests', () => {
cy.ionTabClick('Home')
cy.ionPageVisible('home-details-page-2')
})
it('/routing/tabs/home Menu > Favorites > Menu > Home with redirect, Home page should be visible, and Favorites should be hidden', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`)
cy.ionMenuClick()
cy.ionMenuNav('Favorites')
cy.ionPageVisible('favorites-page')
cy.ionMenuClick()
cy.ionMenuNav('Home with redirect')
cy.ionPageVisible('home-page')
cy.ionPageDoesNotExist('favorites-page')
})
it('/routing/tabs/home Menu > Favorites > Menu > Home with router, Home page should be visible, and Favorites should be hidden', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`)
cy.ionMenuClick()
cy.ionMenuNav('Favorites')
cy.ionPageVisible('favorites-page')
cy.ionMenuClick()
cy.ionMenuNav('Home with router')
cy.ionPageVisible('home-page')
cy.ionPageHidden('favorites-page')
})
/*
Tests to add:
Test that lifecycle events fire

7
packages/react-router/test-app/cypress/support/commands.js vendored
View File

@ -47,11 +47,16 @@ Cypress.Commands.add('ionPageVisible', (pageId) => {
// cy.get(`div.ion-page[data-pageid=${pageId}]`).should('have.attr', 'style', 'z-index: 101;')
})
Cypress.Commands.add('ionPageInvisible', (pageId) => {
cy.get(`div.ion-page[data-pageid=${pageId}]`)
.should('have.class', 'ion-page-invisible')
.should('have.length', 1)
})
Cypress.Commands.add('ionPageHidden', (pageId) => {
cy.get(`div.ion-page[data-pageid=${pageId}]`)
.should('have.class', 'ion-page-hidden')
.should('have.class', 'ion-page-invisible')
.should('have.length', 1)
})

4
packages/react-router/test-app/src/pages/replace-action/Replace.tsx
View File

@ -10,7 +10,7 @@ const ReplaceAction: React.FC<TopPageProps> = () => {
<IonRouterOutlet>
<Route path="/replace-action/page1" component={Page1} exact />
<Route path="/replace-action/page2" component={Page2} exact />
<Route path="/replace-action/page3" component={Edit} exact />
<Route path="/replace-action/page3" component={Page3} exact />
<Route exact path="/replace-action" render={() => <Redirect to="/replace-action/page1" />} />
</IonRouterOutlet>
);
@ -61,7 +61,7 @@ const Page2: React.FC = () => {
);
};
const Edit: React.FC = () => {
const Page3: React.FC = () => {
return (
<IonPage data-pageid="page3">
<IonHeader>

14
packages/react-router/test-app/src/pages/routing/Menu.tsx
View File

@ -41,7 +41,19 @@ const appPages: AppPage[] = [
url: '/routing/otherpage',
iosIcon: heartOutline,
mdIcon: heartSharp
}
},
{
title: 'Home with redirect',
url: '/routing/redirect',
iosIcon: heartOutline,
mdIcon: heartSharp
},
{
title: 'Home with router',
url: '/routing/redirect-routing',
iosIcon: heartOutline,
mdIcon: heartSharp
},
];
const Menu: React.FunctionComponent<MenuProps> = () => {

12
packages/react-router/test-app/src/pages/routing/RedirectRouting.tsx Normal file
View File

@ -0,0 +1,12 @@
import React, { useEffect, useContext } from 'react';
import { IonRouterContext } from '@ionic/react';
const RedirectRouting: React.FC= () => {
const ionRouterContext = useContext(IonRouterContext);
useEffect(() => {
ionRouterContext.push('/routing/tabs', 'none')
}, []);
return null;
};
export default RedirectRouting;

3
packages/react-router/test-app/src/pages/routing/Routing.tsx
View File

@ -6,6 +6,7 @@ import Tabs from './Tabs';
import Favorites from './Favorites';
import OtherPage from './OtherPage';
import PropsTest from './PropsTest';
import RedirectRouting from './RedirectRouting';
interface RoutingProps {
}
@ -35,6 +36,8 @@ const Routing: React.FC<RoutingProps> = () => {
}} /> */}
<Route path="/routing/otherpage" component={OtherPage} />
<Route path="/routing/propstest" component={PropsTest} />
<Route path="/routing/redirect" render={() => <Redirect to="/routing/tabs" />} />
<Route path="/routing/redirect-routing" render={() => <RedirectRouting />} />
<Route render={() => <IonPage data-pageid="not-found"><IonContent><div>Not found</div></IonContent></IonPage>} />
{/* <Route render={() => <Redirect to="/tabs" />} /> */}

3
packages/react-router/tslint.json
View File

@ -33,6 +33,7 @@
"no-unused-expression": false,
"no-constant-condition": false,
"no-empty-interface": false,
"prefer-conditional-expression": false
"prefer-conditional-expression": false,
"prefer-object-spread": false
}
}

1
packages/react/src/models/RouteInfo.ts
View File

@ -7,6 +7,7 @@ import { RouterDirection } from './RouterDirection';
export interface RouteInfo<TOptions = any> {
id: string;
lastPathname?: string;
prevRouteLastPathname?: string;
routeAction?: RouteAction;
routeDirection?: RouterDirection;
routeAnimation?: AnimationBuilder;

4
packages/react/src/routing/RouteManagerContext.ts
View File

@ -9,10 +9,10 @@ export interface RouteManagerContextState {
canGoBack: () => boolean;
clearOutlet: (outletId: string) => void;
createViewItem: (outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) => ViewItem;
findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
findLeavingViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string) => ViewItem | undefined;
findViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string) => ViewItem | undefined;
getChildrenToRender: (outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo, reRender: () => void) => React.ReactNode[];
getViewItemForTransition: (pathname: string) => ViewItem | undefined;
goBack: () => void;
unMountViewItem: (viewItem: ViewItem) => void;
}
@ -22,10 +22,10 @@ export const RouteManagerContext = /*@__PURE__*/React.createContext<RouteManager
canGoBack: () => undefined as any,
clearOutlet: () => undefined,
createViewItem: () => undefined as any,
findViewItemByPathname: () => undefined,
findLeavingViewItemByRouteInfo: () => undefined,
findViewItemByRouteInfo: () => undefined,
getChildrenToRender: () => undefined as any,
getViewItemForTransition: () => undefined,
goBack: () => undefined,
unMountViewItem: () => undefined,
});

3
packages/react/src/routing/ViewStacks.ts
View File

@ -59,9 +59,8 @@ export abstract class ViewStacks {
}
abstract createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement): ViewItem;
// abstract findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
abstract findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
abstract findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string): ViewItem | undefined;
abstract findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string): ViewItem | undefined;
abstract getChildrenToRender(outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo, reRender: () => void, setInTransition: () => void): React.ReactNode[];
abstract getViewItemForTransition(pathname: string): ViewItem | undefined;
}