Moving to more workable v1 solution

2021-01-09 10:52:20 -06:00
parent 6a14c1c47a
commit ba42e4d6d8
22 changed files with 288 additions and 291 deletions
@@ -0,0 +1,47 @@
+import { Redirect, Route } from 'react-router-dom';
+import {
+  IonApp,
+  IonRouterOutlet,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonIcon,
+  IonLabel,
+} from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { ellipse, square, triangle } from 'ionicons/icons';
+
+import Home from './Home';
+import Lists from './Lists';
+import Settings from './Settings';
+
+const Tabs = () => {
+  return (
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route path="/tabs/home" component={Home} exact={true} />
+          <Route path="/tabs/lists" component={Lists} exact={true} />
+          <Route path="/tabs/settings" component={Settings} exact={true} />
+          <Route path="/" render={() => <Redirect to="/tabs/home" />} exact={true} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/tabs/home">
+            <IonIcon icon={triangle} />
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/tabs/lists">
+            <IonIcon icon={ellipse} />
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/tabs/settings">
+            <IonIcon icon={square} />
+            <IonLabel>Tab 3</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  );
+};
+
+export default Tabs;