Route menu et sous menu

Bonjour,

Je suis entrain de créer un menu avec des sous-menu.

Mon fichier route contient les menu et les route (paths) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
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
      }
    ]
  }
]

Quand je clique sur l'item Dashboard, cela affiche bien mon Dashboard.

Mais quand je clique sur SUB_CODE_1, ma page user profil s'affiche pas. Pourtant, dans l'url du navigateur j'ai bien http://localhost:3000/private/profil

Mon Dashboard composant est une classe : class Dashboard extends React.Component { ... }

Mon UserProfil composant est une fonction : function UserProfile(props) { ... }

Si j'utilise mon UserProfil dans un item général du menu, celui-ci s'affiche bien.

Code:

1
2
3
4
5
6
7
8
9
 
  {
    private: true,
    path: "/private/user",
    sidebarName: "menu.sidebarName.profile",
    navbarName: "header.navbarName.profile",
    icon: Person,
    component: UserProfile
  }

J'utilise le template de material ui

Voici la méthode de construction des routes dans le layout :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
  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>
    )
  }