From a48029b810a00ed445a3ce3ececbd8c28ad18d22 Mon Sep 17 00:00:00 2001 From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com> Date: Sun, 9 Nov 2025 15:56:04 -0500 Subject: [PATCH] docs: correct example for RouteReuseStrategy getRouteKey Update the example to properly demonstrate the getRouteKey method usage fixes #65021 --- .../guide/routing/customizing-route-behavior.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/adev/src/content/guide/routing/customizing-route-behavior.md b/adev/src/content/guide/routing/customizing-route-behavior.md index e197a63594b..a489a8e15df 100644 --- a/adev/src/content/guide/routing/customizing-route-behavior.md +++ b/adev/src/content/guide/routing/customizing-route-behavior.md @@ -160,12 +160,12 @@ The `RouteReuseStrategy` class provides five methods that control the lifecycle The following example demonstrates a custom route reuse strategy that selectively preserves component state based on route metadata: ```ts -import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; +import { RouteReuseStrategy, Route, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; import { Injectable } from '@angular/core'; @Injectable() export class CustomRouteReuseStrategy implements RouteReuseStrategy { - private handlers = new Map(); + private handlers = new Map(); shouldDetach(route: ActivatedRouteSnapshot): boolean { // Determines if a route should be stored for later reuse @@ -197,12 +197,14 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy { return future.routeConfig === curr.routeConfig; } - private getRouteKey(route: ActivatedRouteSnapshot): string { - return route.routeConfig ?? ''; + private getRouteKey(route: ActivatedRouteSnapshot): Route | null { + return route.routeConfig; } } ``` +NOTE: Avoid using the route path as the key when `canMatch` guards are involved, as it may lead to duplicate entries. + ### Configuring a route to use a custom route reuse strategy Routes can opt into reuse behavior through route configuration metadata. This approach keeps the reuse logic separate from component code, making it easy to adjust behavior without modifying components: