I am new in react ionic and want to show different menu item in different page. I have one menu component and included it in App.tsx. But same menu item is showing in each page. Any help be appreciated.
Thanks in advance
const appPage: AppPage[] = [
{
title: 'Home',
url: '/home',
icon: home
},
{
title: 'Register',
url: '/home/register',
icon: home
},
{
title: 'Login',
url: '/home/login',
icon: home
}
];
<IonRouterOutlet id="main">
<Route path="/home" component={Home} exact={true} />
<Route path="/home/register" component={Register} exact={true} />
<Route path="/home/login" component={Login} exact={true} />
<Route path="/home/dashboard" component={dashboard} exact={true} />
<Route path="/home/forgot_password" component={Forgot} exact={true} />
</IonRouterOutlet>
</IonSplitPane>`
This is menu
interface MenuProps extends RouteComponentProps {
appPages: AppPage[];
}
const Menu: React.FunctionComponent = ({appPages}) => (<IonContent className="menu_list">
<IonList className="ion-padding-menubar">
{appPages.map((appPage, index) => {
return (
<IonMenuToggle key={index} autoHide={true}>
<IonItem routerLink={appPage.url} routerDirection="none">
<IonLabel color="light">{appPage.title}</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
</IonContent>
