Question

我正在创建带有子菜单的菜单。

我的文件路径包含菜单和路径：

const dashboardRoutes = [
  {
    private: true,
    path: "/private/dashboard",
    sidebarName: "menu.sidebarName.dashboard",
    navbarName: "header.navbarName.dashboard",
    icon: Dashboard,
    component: DashboardPage
  },
  {
    sidebarName: "menu.sidebarName.reference",
    code: "CODE",
    icon: "content_paste",
    subMenus:[
      {
        subMenu: true,
        path: "/private/profil",
        sidebarName: "menu.sidebarName.address",
        navbarName: "header.navbarName.address",
        code: "SUB_CODE_1",
        icon: "content_paste",
        component: UserProfile
      }
    ]
  }
]

当我单击“仪表板”项目时，将显示“我的仪表板”页面。

但是，当我单击SUB_CODE_1项目时，不会显示“我的用户个人资料”页面。

我的仪表板文件是一个类：仪表板类扩展了React.Component { ... }

我的UserProfil文件是一个函数：函数UserProfile（props）{ ... }

如果在常规菜单而不是子菜单中使用我的UserProfil，则它可以工作：

  {
    private: true,
    path: "/private/user",
    sidebarName: "menu.sidebarName.profile",
    navbarName: "header.navbarName.profile",
    icon: Person,
    component: UserProfile
  }

我使用材料ui的模板

我创建路线的功能：

      buildRoute(){
    return(
      <Switch>
        {dashboardRoutes.map((prop, key) => {
          if(prop.subMenus != null){
            {prop.subMenus.map((propSubMenu, keySubMenu) => {
              if (propSubMenu.redirect){  
                return <Redirect from={propSubMenu.path} to={propSubMenu.to} key={keySubMenu} />;
              }else if(propSubMenu.private){        
                return <PrivateRoute authenticated={JSON.parse(localStorage.getItem(IS_AUTHENTICATED))} path={propSubMenu.path} component={propSubMenu.component} key={keySubMenu} />;
              }else{
                return <Route path={propSubMenu.path} component={propSubMenu.component} key={keySubMenu} />;
              }
            })}
          }else{
            if (prop.redirect){  
              return <Redirect from={prop.path} to={prop.to} key={key} />;
            }else if(prop.private){         
              return <PrivateRoute authenticated={JSON.parse(localStorage.getItem(IS_AUTHENTICATED))} path={prop.path} component={prop.component} key={key} />;
            }else{
              return <Route path={prop.path} component={prop.component} key={key} />;
            }
          }
        })}
      </Switch>
    )
  }

Reactjs路线和材料用户界面

0 个答案: