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	Review	Updated (UTC)
ionic-docs	Ready	Preview, Comment	Dec 16, 2025 5:15pm

[thetaPC]

LGTM, can we also mention within each frameworks' IonPage page that it's needed for styling as well?

[ShaneK]

LGTM, can we also mention within each frameworks' IonPage page that it's needed for styling as well?

How about this?

Commit 6289d53

Direct preview link

[thetaPC]

LGTM