docs(tabs): add IonPage wrapper to React router examples (#4356)

Author: ShaneK

docs/react/navigation.md

@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';

docs/vue/navigation.md

@@ -494,6 +494,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```vue
 <template>
   <ion-page>

static/usage/v6/tabs/router/react/home_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const HomePage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Listen now</IonTitle>
@@ -21,7 +21,7 @@ const HomePage = () => (
         Listen now content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default HomePage;

static/usage/v6/tabs/router/react/library_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const LibraryPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Library</IonTitle>
@@ -21,7 +21,7 @@ const LibraryPage = () => (
         Library content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default LibraryPage;

static/usage/v6/tabs/router/react/radio_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const RadioPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Radio</IonTitle>
@@ -21,7 +21,7 @@ const RadioPage = () => (
         Radio content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default RadioPage;

static/usage/v6/tabs/router/react/search_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const SearchPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Search</IonTitle>
@@ -21,7 +21,7 @@ const SearchPage = () => (
         Search content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default SearchPage;

static/usage/v7/tabs/router/react/home_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const HomePage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Listen now</IonTitle>
@@ -21,7 +21,7 @@ const HomePage = () => (
         Listen now content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default HomePage;

static/usage/v7/tabs/router/react/library_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const LibraryPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Library</IonTitle>
@@ -21,7 +21,7 @@ const LibraryPage = () => (
         Library content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default LibraryPage;

static/usage/v7/tabs/router/react/radio_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const RadioPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Radio</IonTitle>
@@ -21,7 +21,7 @@ const RadioPage = () => (
         Radio content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default RadioPage;

static/usage/v7/tabs/router/react/search_page_tsx.md

@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const SearchPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Search</IonTitle>
@@ -21,7 +21,7 @@ const SearchPage = () => (
         Search content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default SearchPage;