Custom RouteReuseStrategy in Angular: Route Reuse Not Consistent Across Routes

I am implementing a custom RouteReuseStrategy in Angular to cache and reuse routes. The logic is based on a reuse flag in the route's data. While this works fine for my dashboard route, I'm having trouble navigating to the driver create route. I expected both routes to behave similarly since they have the same reuse flag set in the route configuration.

The dashboard route works fine with the RouteReuseStrategy, and I can navigate to it without issues. However, I can't navigate to the driver create route. If I remove the future.routeConfig === current.routeConfig condition in shouldReuseRoute, it works, but this condition is crucial to prevent unintended route reuse when the route configurations are the same.

• Why does the route reuse strategy work for dashboard but not for driver create?
• How can I ensure that both routes are reused as expected without removing the routeConfig comparison?

@Injectable({ providedIn: 'root' })
export class CachedRouteReuseStrategy implements RouteReuseStrategy {
private readonly handlersMap = new Map<string, DetachedRouteHandle>();

public shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.routeConfig?.data?.['reuse'] ?? false;
}

public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
const routeComponentName = route.routeConfig?.component?.name;
if (routeComponentName && !!handle) {
this.handlersMap.set(routeComponentName, handle);
}
}

public shouldAttach(route: ActivatedRouteSnapshot): boolean {
const routeComponentName = route.routeConfig?.component?.name;
return !!routeComponentName && this.handlersMap.has(routeComponentName);
}

public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
const routeComponentName = route.routeConfig?.component?.name;
return this.handlersMap.get(routeComponentName ?? '') ?? null;
}

public shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
return future.routeConfig === current.routeConfig || !!future.routeConfig?.data?.['reuse'];
}
}


Driver Routes:

export const driverRoutes: Routes = [
{
path: 'drivers',
data: { breadcrumb: 'drivers' },
children: [
{
path: '',
title: 'Drivers',
component: DriversListComponent,
data: { pageTitle: 'drivers' }
},
{
path: 'create',
title: 'Create Driver',
component: DriverCreateComponent,
data: {
reuse: true,
pageTitle: 'create driver',
breadcrumb: 'create driver'
}
}
]
}
];


Dashboard Routes:

export const dashboardRoutes: Routes = [
{
path: 'dashboard',
title: 'Dashboard',
component: DashboardComponent,
data: {
reuse: true,
pageTitle: 'dashboard'
}
}
];


App Routes:

export const appRoutes: Routes = [
{
path: '',
component: AuthLayoutComponent,
loadChildren: () => import('./pages/auth/auth.routes').then((m) => m.authRoutes)
},
{
path: '',
canMatch: [authGuard],
component: DashboardLayoutComponent,
children: [
{
path: '',
data: { preload: true },
loadChildren: () => import('./pages/dashboard/dashboard.routes').then((m) => m.dashboardRoutes)
},
{
path: '',
data: { preload: true },
loadChildren: () => import('./pages/driver/driver.routes').then((m) => m.driverRoutes)
}
]
}
];

Continue reading...