Skip to content

Instantly share code, notes, and snippets.

@jsoneaday

jsoneaday/App.tsx part 4

Last active Jan 12, 2020
Embed
What would you like to do?
import React from "react";
import { Redirect, Route } from "react-router-dom";
import {
IonApp,
IonIcon,
IonLabel,
IonRouterOutlet,
IonTabBar,
IonTabButton,
IonTabs
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { photos, camera } from "ionicons/icons";
import Tab2 from "./pages/Tab2";
import Details from "./pages/Details";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.css";
import Camera from "./pages/Camera";
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/camera" component={Camera} exact={true} />
<Route path="/photos" component={Tab2} exact={true} />
<Route path="/photos/details" component={Details} />
<Route
path="/"
render={() => <Redirect to="/camera" />}
exact={true}
/>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="camera" href="/camera">
<IonIcon icon={camera} />
<IonLabel>Camera</IonLabel>
</IonTabButton>
<IonTabButton tab="photos" href="/photos">
<IonIcon icon={photos} />
<IonLabel>Photos</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
);
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment