test(react-router): fix test for nested outlet rendering on direct navigation

Author: ShaneK

packages/react-router/test/base/src/App.tsx

@@ -67,7 +67,7 @@ const App: React.FC = () => {
           <Route path="/replace-action" element={<Navigate to="/replace-action/page1" replace />} />
           <Route path="/tab-context/*" element={<TabsContext />} />
           <Route path="/outlet-ref" element={<OutletRef />} />
-          <Route path="/swipe-to-go-back" element={<SwipeToGoBack />} />
+          <Route path="/swipe-to-go-back/*" element={<SwipeToGoBack />} />
           <Route path="/dynamic-ionpage-classnames" element={<DynamicIonpageClassnames />} />
           <Route path="/tabs/*" element={<Tabs />} />
           <Route path="/tabs-secondary/*" element={<TabsSecondary />} />

packages/react-router/test/base/src/pages/swipe-to-go-back/SwipeToGoBack.tsx

@@ -41,7 +41,7 @@ const Details: React.FC = () => {
     <IonPage data-pageid="details">
       <IonHeader>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Details</IonTitle>

packages/react-router/test/base/tests/e2e/specs/swipe-to-go-back.cy.js

@@ -31,6 +31,14 @@ describe('Swipe To Go Back', () => {
     cy.ionPageVisible('main');
   });
 
+  it('should render details page when navigating directly to nested route', () => {
+    cy.visit(`http://localhost:${port}/swipe-to-go-back/details?${IOS_MODE}`);
+    cy.ionPageVisible('details');
+
+    cy.get('[data-pageid="details"]').should('be.visible');
+    cy.get('[data-pageid="details"] ion-content').should('contain', 'Details');
+  });
+
   it('should swipe and abort within a tab', () => {
     cy.visit(`http://localhost:${port}/tabs/tab1?${IOS_MODE}`);
     cy.ionPageVisible('tab1');