Route reuse not working below code any issue

Below code reuse is not working route changes and reloads CustomRouteReuseStrategy will it work or any alternate way

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
private storedRoutes: { [key: string]: DetachedRouteHandle } = {};

shouldDetach(route: ActivatedRouteSnapshot): boolean {
// Decide whether to store the route
return true;
}

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
// Cache the route using its path and params as the key
const key = this.getRouteKey(route);
if (key) {
this.storedRoutes[key] = handle;
}
}

shouldAttach(route: ActivatedRouteSnapshot): boolean {
// Check if the route exists in the cache
const key = this.getRouteKey(route);
return !!this.storedRoutes[key];
}

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
// Retrieve the cached route if it exists
const key = this.getRouteKey(route);
return key ? this.storedRoutes[key] : null;
}

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
// Reuse the route if the path and parameters match
return future.routeConfig === curr.routeConfig &&
JSON.stringify(future.params) === JSON.stringify(curr.params);
}

private getRouteKey(route: ActivatedRouteSnapshot): string | null {
// Create a unique key for the route using the path and params
const path = route.routeConfig?.path;
const params = JSON.stringify(route.params);
return path ? `${path}_${params}` : null;
}
}​

Continue reading...