52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Redirect, Route, Switch } from 'react-router-dom';
|
|
import {
|
|
IonRouterOutlet,
|
|
IonTabs,
|
|
IonTabBar,
|
|
IonTabButton,
|
|
IonIcon,
|
|
IonLabel,
|
|
} from '@ionic/react';
|
|
import { cog, flash, list } from 'ionicons/icons';
|
|
|
|
import Home from './Feed';
|
|
import Lists from './Lists';
|
|
import ListDetail from './ListDetail';
|
|
import Settings from './Settings';
|
|
|
|
const Tabs = () => {
|
|
return (
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
<Switch>
|
|
<Route path="/feed" render={() => <Home />} exact={true} />
|
|
<Route path="/lists" render={() => <Lists />} exact={true} />
|
|
<Route
|
|
path="/lists/:listId"
|
|
render={() => <ListDetail />}
|
|
exact={true}
|
|
/>
|
|
<Route path="/settings" render={() => <Settings />} exact={true} />
|
|
<Route path="" render={() => <Redirect to="/feed" />} exact={true} />
|
|
</Switch>
|
|
</IonRouterOutlet>
|
|
<IonTabBar slot="bottom">
|
|
<IonTabButton tab="tab1" href="/feed">
|
|
<IonIcon icon={flash} />
|
|
<IonLabel>Feed</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab2" href="/lists">
|
|
<IonIcon icon={list} />
|
|
<IonLabel>Lists</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab3" href="/settings">
|
|
<IonIcon icon={cog} />
|
|
<IonLabel>Settings</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|