I'm trying to set up child paths, but when navigating, the path turns out to be the wrong one
I have a cabinet module and these are its routers
const routes: Routes = [
{
path: '',
component: CabinetComponent,
children: [
{
path: RouteCabinetPath.DASHBOARD,
loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
},
]
}
];
export enum RouteCabinetPath {
CABINET = 'cabinet',
DASHBOARD = 'dashboard',
}
I want to make sure that I have paths to the cabinet itself /cabinet and /cabinet/dashboard
CodePudding user response:
Since this is a feature module that is (probably) lazy loaded, the /cabinet
-part of your routes will be located in the AppRoutingModule
:
{path: 'cabinet', loadChildren: () => ...CabinetModule }
Here in the CabinetRoutingModule
you will need to define two routes:
[
{path: '', component: CabinetComponent},
{path: 'dashboard', loadChildren: () => ...DashboardModule}
]
or if you want to embed those two routes into your CabinetComponent
you could add a child route with an empty route
{path: '', component: CabinetComponent,
children: [
{path: '', component: CabinetDetailsComponent},
{path: 'dashboard', loadChildren: () => ...DashboardModule
]
CodePudding user response:
You should change path: '' to path: 'cabinet',
const routes: Routes = [
{
path: 'cabinet',
component: CabinetComponent,
children: [
{
path: RouteCabinetPath.DASHBOARD,
loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
},
]
}
];