cannot access the right routes! angular router

Question

I have this structure of routes:

{path:"all", component: TopicsTableComponent,data: { breadcrumb: {label:"All Topics",} }, children: [
          {path:"levels/all", component: LevelsTableComponent, data: { breadcrumb: {label:"All Topics Levels",} }}
        ]},
    {path:":id", component: TopicsTableComponent,data: { breadcrumb: {label:"All Topics",} }, children: [
          {path:"levels/all", component: LevelsTableComponent, data: { breadcrumb: {label:"All Topics Levels",} }}
        ]},
      {path: "add", component: LevelComponent, data: { breadcrumb: {label:"Add Topics",} },children: [
          {path:"levels/add", data: { breadcrumb: {label:"Add Topics Level",} }, component: LevelComponent}
        ]}
    ]

what i need obviously is when typing "all" it will redirect me to Topics table and when typing "all/levels/all" it will redirect me to levels Table but the real flow is both URLs are taking me to Topics table where is the mistake?

Answer 1

It's normal to redirect to all/levels/all you need to separate first route all like

{path:"all", component: TopicsTableComponent,data: { breadcrumb: {label:"All Topics"}}

And after add parent route

 {path:"all", component: TopicsTableComponent,data: { breadcrumb: {label:"All Topics",} }, children: [
          {path:"levels/all", component: LevelsTableComponent, data: { breadcrumb: {label:"All Topics Levels",} }}
        ]},
    {path:":id", component: TopicsTableComponent,data: { breadcrumb: {label:"All Topics",} }, children: [
          {path:"levels/all", component: LevelsTableComponent, data: { breadcrumb: {label:"All Topics Levels",} }}
        ]},
      {path: "add", component: LevelComponent, data: { breadcrumb: {label:"Add Topics",} },children: [
          {path:"levels/add", data: { breadcrumb: {label:"Add Topics Level",} }, component: LevelComponent}
        ]}
    ]

Hope useful