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

[ShaneK]

resolves #4355

Fixes React tabs router examples to include IonPage wrapper around page content.

• Wrap tab page components in IonPage to provide proper flex layout
• Fixes issue where IonContent overlaps IonTabBar when placed in bottom slot
• Updates examples for v6, v7, and v8

Problem

The React tabs router examples were missing the IonPage wrapper, causing IonContent to extend over the IonTabBar.

Solution

Each routed tab page component needs to be wrapped in IonPage:

// Before (broken)
const HomePage = () => (
  <>
    <IonHeader>...</IonHeader>
    <IonContent>...</IonContent>
  </>
);

// After (fixed)
const HomePage = () => (
  <IonPage>
    <IonHeader>...</IonHeader>
    <IonContent>...</IonContent>
  </IonPage>
);

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-docs	Ready	Preview	Comment	Dec 11, 2025 10:30pm