From d51f95ec8119f1d3dcc0da5d6bf90f4b6eb34db1 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Fri, 21 Nov 2025 11:40:09 -0800
Subject: [PATCH] fix(react-router): use state to track IonRouterOutlet ref id
 in test

---
 .../test/base/src/pages/outlet-ref/OutletRef.tsx       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx b/packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx
index e8ac23b65c..258aff14cc 100644
--- a/packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx
+++ b/packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import {
   IonRouterOutlet,
   IonPage,
@@ -13,16 +13,20 @@ interface OutletRefProps {}
 
 export const OutletRef: React.FC<OutletRefProps> = () => {
   const ref = useRef<HTMLIonRouterOutletElement>(null);
+  const [outletId, setOutletId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    console.log(ref);
+    // Update the outlet id once the ref is populated
+    if (ref.current?.id) {
+      setOutletId(ref.current.id);
+    }
   }, []);
 
   return (
     <IonRouterOutlet id="main-outlet" ref={ref}>
       <Route
         path="/outlet-ref"
-        element={<Main outletId={ref.current?.id} />}
+        element={<Main outletId={outletId} />}
       />
     </IonRouterOutlet>
   );