fix(react): Do a better job matching up route to sync, fixes #20363 (#20446)

packages/react-router/src/ReactRouter/RouteManagerContext.ts

@@ -4,7 +4,7 @@ import { ViewStacks } from './ViewStacks';
 
 export interface RouteManagerContextState {
   syncView: (page: HTMLElement, viewId: string) => void;
-  syncRoute: (id: string, route: any) => void;
+  syncRoute: (route: any) => void;
   hideView: (viewId: string) => void;
   viewStacks: ViewStacks;
   setupIonRouter: (id: string, children: ReactNode, routerOutlet: HTMLIonRouterOutletElement) => void;

packages/react-router/src/ReactRouter/Router.tsx

@@ -368,13 +368,17 @@ export class RouteManager extends React.Component<RouteManagerProps, RouteManage
     }
   }
 
-  syncRoute(_id: string, routerOutlet: any) {
+  syncRoute(routerOutlet: any) {
     const ionRouterOutlet = React.Children.only(routerOutlet) as React.ReactElement;
 
     React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
       for (const routeKey in this.routes) {
         const route = this.routes[routeKey];
-        if (typeof route.props.path !== 'undefined' && route.props.path === (child.props.path || child.props.from)) {
+        if (
+          ((route.props.path || route.props.from) === (child.props.path || child.props.from)) &&
+          (route.props.exact === child.props.exact) &&
+          (route.props.to === child.props.to)
+        ) {
           this.routes[routeKey] = child;
         }
       }

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -32,7 +32,7 @@ class StackManagerInner extends React.Component<StackManagerProps, StackManagerS
   }
 
   static getDerivedStateFromProps(props: StackManagerProps, state: StackManagerState) {
-    props.routeManager.syncRoute('', props.children);
+    props.routeManager.syncRoute(props.children);
     return state;
   }
 

packages/react-router/src/ReactRouter/View.tsx

@@ -1,5 +1,6 @@
 import { IonLifeCycleContext, NavContext } from '@ionic/react';
 import React from 'react';
+import { Redirect } from 'react-router';
 
 import { isDevMode } from '../utils';
 
@@ -19,6 +20,21 @@ export class View extends React.Component<ViewProps, {}> {
   context!: React.ContextType<typeof IonLifeCycleContext>;
   ionPage?: HTMLElement;
 
+  componentDidMount() {
+    /**
+     * If we can tell if view is a redirect, hide it so it will work again in future
+     */
+    const { view, route } = this.props;
+    if (route.type === Redirect) {
+      this.props.onHideView(view.id);
+    } else if (route.props.render && !view.isIonRoute) {
+      // Test the render to see if it returns a redirect
+      if (route.props.render().type === Redirect) {
+        this.props.onHideView(view.id);
+      }
+    }
+  }
+
   componentWillUnmount() {
     if (this.ionPage) {
       this.ionPage.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));