48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
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;
|