Как использовать другой пункт меню на другой странице в React ionic
Я новичок в React ionic и хочу показать другой пункт меню на другой странице. У меня есть один компонент меню, и я включил его в App.tsx. Но на каждой странице отображается один и тот же пункт меню. Любая помощь будет оценена.
заранее спасибо
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>`
Это менюinterface MenuProps extends RouteComponentProps {
appPages: AppPage[];
}const Меню: 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>