fix(react): route with redirect will mount page

[sean-perkins]

Issue number: resolves #28838

---

What is the current behavior?

In #28316 we resolved a longstanding misconfiguration where event listeners being added to the page were not removed. This was due to incorrect usage of .bind creating a new instance of the callback functions.

By removing the event listener for ionViewDidLeave, before the component has actually unmounted in react, resulted in the registered destroy callback to not fire:

ionic-framework/packages/react/src/contexts/IonLifeCycleContext.tsx

Lines 208 to 216 in 51c729e

	ionViewDidLeave() {
	this.ionViewDidLeaveCallbacks.forEach((cb) => {
	const destructor = cb();
	if (cb.id) {
	this.ionViewDidLeaveDestructorCallbacks.push({ id: cb.id, destructor });
	}
	});
	this.componentCanBeDestroyed();
	}

and

ionic-framework/packages/react/src/routing/ViewLifeCycleManager.tsx

Lines 21 to 32 in 51c729e

	this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
	if (!this.props.mount) {
	if (this._isMounted) {
	this.setState(
	{
	show: false,
	},
	() => this.props.removeView()
	);
	}
	}
	});

This resulted in a scenario that using a Redirect could cause the wrong view to be unmounted (the entering view) and leave the user on an empty screen.

What is the new behavior?

• ionViewDidEnter event listener is not removed while the component is unmounting. The browser will naturally remove the event listener when the element node is detached from the DOM.
• Users are no longer presented with a white screen after clicking a route that uses a redirect.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 7.6.7-dev.11706567011.11e782a9