My application structure is organized as shown below
.
├── photos
├── posts
├── users
│ ├── detail
│ │ ├── address
│ │ ├── family
│ │ ├── information
│ │ └── phones
│ ├── friends
│ └── profile
└── videos
When creating nested routes, I prefer to keep routes at the same level within their own level.
For example:
First-level routes are placed in the root routes. Second-level routes go to the users routes and third-level routes go to the detail route.
Therefore, the root routes look like this,
const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'photos',
component: PhotosComponent
},
{
path: 'posts',
component: PostsComponent
},
{
path: 'users',
component: UserListComponent
},
{
path: 'user/:username',
component: UserComponent
},
{
path: 'videos',
component: VideosComponent
}
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
// for the user routes,
const userRoutes: Routes = [
{
path: 'detail',
component: DetailComponent
},
{
path: 'friends',
component: FriendsComponent
},
{
path: 'profile',
component: ProfileComponent
}
]
export const UserRoutes = RouterModule.forChild(userRoutes);
// for the detail routes,
const detailRoutes: Routes = [
{
path: 'address',
component: AddressComponent
},
{
path: 'family',
component: FamilyComponent
},
{
path: 'info',
component: InformationComponent
},
{
path: 'phones',
component: PhonesComponent
}
]
export const DetailRoutes = RouterModule.forChild(detailRoutes);
I am struggling with mixing the given routes together.
I want the route to be /users/:username/detail/info but I can't seem to figure out how to link them.