Javascript 如何在不同的页面中使用不同的菜单项

我是新来的，想在不同的页面上显示不同的菜单项。我有一个菜单组件，包含在App.tsx中。但每页都显示相同的菜单项。 任何帮助都将不胜感激

提前谢谢

const-appPage:appPage[]=[
{
标题:"家",，
url:“/home”，
图标：主页
},
{
标题：'登记'，
url:“/home/register”，
图标：主页
},
{
标题：“登录”，
url:“/home/login”，
图标：主页
}
];


`

这是菜单
接口菜单uprops扩展了RouteComponentProps{
AppPage:AppPage[]；
}
常量菜单：React.FunctionComponent=（{appPages}）=>（

{appPages.map（（appPage，index）=>{
返回(
{appPage.title}
);
})}
你能提供一些代码，尽量减少可复制的问题，这样我们就可以确认了，我已经更新了帖子
    <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>`