bug: IonRouterOutlet fails to work when dynamically adding Routes after the first render #21329
Description
Bug Report
Ionic version:
5.0.7
Current behavior:
When the app first loads and 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.