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

fix(react): duplicate page transitions do not happen on react 18 (#25798)

Browse Source 
resolves #25797
This commit is contained in:
Liam DeBeasi
2022-08-23 13:19:38 -05:00
committed by GitHub
parent 30200051bb
commit a39d776f08
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,8 +206,18 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
registerIonPage(page: HTMLElement, routeInfo: RouteInfo) {
const foundView = this.context.findViewItemByRouteInfo(routeInfo, this.id);
if (foundView) {
const oldPageElement = foundView.ionPageElement;
foundView.ionPageElement = page;
foundView.ionRoute = true;
/**
* React 18 will unmount and remount IonPage
* elements in development mode when using createRoot.
* This can cause duplicate page transitions to occur.
*/
if (oldPageElement === page) {
return;
}
}
this.handlePageTransition(routeInfo);
}

16
packages/react/src/routing/OutletPageManager.tsx
View File

@ -18,16 +18,26 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
ionLifeCycleContext!: React.ContextType<typeof IonLifeCycleContext>;
context!: React.ContextType<typeof StackContext>;
ionRouterOutlet: HTMLIonRouterOutletElement | undefined;
outletIsReady: boolean;
constructor(props: OutletPageManagerProps) {
super(props);
this.outletIsReady = false;
}
componentDidMount() {
if (this.ionRouterOutlet) {
componentOnReady(this.ionRouterOutlet, () => {
this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
});
/**
* This avoids multiple raf calls
* when React unmounts + remounts components.
*/
if (!this.outletIsReady) {
componentOnReady(this.ionRouterOutlet, () => {
this.outletIsReady = true;
this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
});
}
this.ionRouterOutlet.addEventListener(
'ionViewWillEnter',