我是反应离子的新手，想在不同的页面中显示不同的菜单项。我有一个菜单组件并将其包含在 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[];
}
常量菜单：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>