Reactjs маршрут и материал пользовательского интерфейса - PullRequest
Новая
       9

Reactjs маршрут и материал пользовательского интерфейса

0 голосов
/ 11 декабря 2018

Я создаю меню с подменю.

Мой маршрут файла содержит меню и маршрут: 

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, страница Мой UserProfile не отображается.

Мой файл Dashboard является классом: класс Dashboard расширяет React.Component {...}

Мой файл UserProfil является функцией: function 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>
    )
  }
...