fix(router): cache route handle if found (#22475)

When asking the route reuse strategy to retrieve a detached route handle, store the
return value in a local variable for further processing instead of asking again later.

resolves #22474

PR Close #22475

packages/router/src/create_router_state.ts

@@ -30,16 +30,19 @@ function createNode(
     return new TreeNode<ActivatedRoute>(value, children);
 
     // retrieve an activated route that is used to be displayed, but is not currently displayed
-  } else if (routeReuseStrategy.retrieve(curr.value)) {
-    const tree: TreeNode<ActivatedRoute> =
-        (<DetachedRouteHandleInternal>routeReuseStrategy.retrieve(curr.value)).route;
-    setFutureSnapshotsOfActivatedRoutes(curr, tree);
-    return tree;
-
   } else {
-    const value = createActivatedRoute(curr.value);
+    const detachedRouteHandle =
-    const children = curr.children.map(c => createNode(routeReuseStrategy, c));
+        <DetachedRouteHandleInternal>routeReuseStrategy.retrieve(curr.value);
-    return new TreeNode<ActivatedRoute>(value, children);
+    if (detachedRouteHandle) {
+      const tree: TreeNode<ActivatedRoute> = detachedRouteHandle.route;
+      setFutureSnapshotsOfActivatedRoutes(curr, tree);
+      return tree;
+
+    } else {
+      const value = createActivatedRoute(curr.value);
+      const children = curr.children.map(c => createNode(routeReuseStrategy, c));
+      return new TreeNode<ActivatedRoute>(value, children);
+    }
   }
 }
 

packages/router/test/create_router_state.spec.ts

@@ -88,6 +88,27 @@ describe('create router state', () => {
     checkActivatedRoute(currC[0], ComponentA);
     checkActivatedRoute(currC[1], ComponentB, 'right');
   });
+
+  it('should cache the retrieved routeReuseStrategy', () => {
+    const config = [
+      {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+      {path: 'c', component: ComponentC, outlet: 'left'}
+    ];
+    spyOn(reuseStrategy, 'retrieve').and.callThrough();
+
+    const prevState =
+        createRouterState(reuseStrategy, createState(config, 'a(left:b)'), emptyState());
+    advanceState(prevState);
+
+    // Expect 2 calls as the baseline setup
+    expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(2);
+
+    // This call should produce a reused activated route
+    const state = createRouterState(reuseStrategy, createState(config, 'a(left:c)'), prevState);
+
+    // Verify the retrieve method has been called one more time
+    expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(3);
+  });
 });
 
 function advanceState(state: RouterState): void {