/
Tabs.tsx
49 lines (45 loc) · 1.99 KB
/
Tabs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from 'react';
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { Route, Redirect } from 'react-router';
import Tab1 from './Tab1';
import Details from './Details';
import Tab2 from './Tab2';
import Tab3 from './Tab3';
import { triangle, ellipse, square } from 'ionicons/icons';
import SettingsDetails from './SettingsDetails';
interface TabsProps {
}
const Tabs: React.FC<TabsProps> = () => {
return (
<IonTabs>
<IonRouterOutlet id="tabs">
<Route path="/routing/tabs/home" component={Tab1} exact />
<Route path="/routing/tabs/home/details/:id" component={Details} exact={true} />
{/* <Route path="/routing/tabs/home/details/:id" render={(props) => {
return <Details />
}} exact={true} /> */}
<Route path="/routing/tabs/settings" component={Tab2} exact={true} />
<Route path="/routing/tabs/settings/details/:id" component={SettingsDetails} exact={true} />
<Route path="/routing/tabs/tab3" component={Tab3} />
<Route path="/routing/tabs" render={() => <Redirect to="/routing/tabs/home" />} exact={true} />
<Route path="/routing/tabs/redirect" render={() => <Redirect to="/routing/tabs/settings" />} exact={true} />
{/* <Route path="/routing/tabs" render={() => <Route render={() => <Redirect to="/tabs/home" />} />} /> */}
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="home" href="/routing/tabs/home" routerOptions={{unmount: true}}>
<IonIcon icon={triangle} />
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton tab="settings" href="/routing/tabs/settings">
<IonIcon icon={ellipse} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/routing/tabs/tab3">
<IonIcon icon={square} />
<IonLabel>Tab 3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;