update,

03_source/mobile/src/pages/DemoReactSwitchTabs/AppPages/Tab1.jsx

@@ -0,0 +1,52 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import ExploreContainer from '../components/ExploreContainer';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+
+import './Tab1.css';
+
+const Tab1 = () => {
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    window.location.href = '/tabs/demo-list';
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Home</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Home</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Home page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

03_source/mobile/src/pages/DemoReactSwitchTabs/AppPages/Tab2.jsx

@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab2.css';
+
+const Tab2 = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Profile</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Profile</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Profile page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

03_source/mobile/src/pages/DemoReactSwitchTabs/AppPages/Tab3.jsx

@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab3.css';
+
+const Tab3 = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Settings</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Settings</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Settings page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab3;