bug: IonRouterOutlet fails to work when dynamically adding Routes after the first render

Bug Report

Ionic version: 5.0.7

Current behavior: When the app first loads and <IonRouterOutlet> is rendered all the routes will not re-render even when they are changed. For instance, several routes/redirects get changed or added after a user logs in, but the IonRouterOutlet will not update routes. I can see the new routes updated using the inspector, but IonRouterOutlet seems to ignore them as if it has cached them someplace and then ignores any updates.

Expected behavior: When routes are added or removed from IonRouterOutlet at run time, the new routes should become available and the removed ones should no longer exist.

Steps to reproduce: Dynamically generate a series of routes from an array of route data. Run an event like a redux hook update that will cause the App component to re-render and in this process make the routes change. The bug is that the application ignores the route changes.

Related code:

–Main App–

const App: React.FC = () => {
  const loggedIn = useSelector(SelectLoginStatus);
  const currentUser = useSelector(SelectCurrentUser);

  return (
    <IonApp>
      {console.log(AppRoutesNoAuthRoutes(loggedIn, currentUser))}}
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
         <IonRouterOutlet key="AppIonRouterOutlet" id="main">
            {AppRoutes(loggedIn, currentUser)}
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

–Route Rendering function–

export const AppRoutes = (loggedIn:boolean, currentUser:IUser) => {
    routeInfoArray:IRouteInfo[] = myInfoAray;
    keyPrefix:string = "uniqueKeyPrefix";

    return routeInfoArray.map((route, i) => {
        if(route.roles.filter(role => role === UserRoles.Unregistered).length) {
            return <Route key={`${keyPrefix}-${i}`} path={route.path} component={route.component} exact />
        } else {
            if(loggedIn) {
                if(route.roles.filter(role => role === currentUser.Role || role === UserRoles.AllRegistered).length) {
                    return <Route key={`${keyPrefix}-${i}`} path={route.path} component={route.component} exact />
                } else {
                return <Redirect key={`${keyPrefix}-${i}`} from={route.path} to={AccountRouteInfo[AccountRouteKeys.Unauthorized].path} />
                }
            } else {
                return <Redirect key={`${keyPrefix}-${i}`} from={route.path} to={AccountRouteInfo[AccountRouteKeys.Login].path} />
            }
        }        
    });
}

–Notes– I have noticed that if I nest my routes in a component and then update like this IonRouteOutlet will allow them to be updated. However, nesting routes in another component causes other problems to happen because this does not appear to be allowed with IonRouteOutlet. I think I need IonRouteOutlet to make the IonSplitPane to work with multiple pages.

[elylucas]

Hi @pjschrock,

We have a dev release that should fix this issue. If you can, could you try to install it and let us know if it fixes the issue and if you run into any others? To install it run:

npm i @ionic/[e-mail]37029 @ionic/[e-mail]37029

If all goes good this should be available in the next Ionic release.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.