Angular Routing Invalid URL Segment

Question

In my main Routing File

        RouterModule.forRoot([
        {
            path: '', component: AppMainComponent,
            children: [
                {path: '', component: DashboardComponent},
                {
                    path: 'participants',
                    loadChildren: () => import('./modules/participants/participants.module').then(m => m.ParticipantsModule),
                    data: {breadcrumb: 'Participants'}
                }
            ]
        },
        {path: 'error', component: AppErrorComponent},
        {path: 'accessdenied', component: AppAccessdeniedComponent},
        // {path: 'notfound', component: AppNotfoundComponent},
        {path: 'login', component: LoginComponent},
        // {path: '**', redirectTo: '/notfound'},
    ], {scrollPositionRestoration: 'enabled'})
],

In my Child Module Routing

    imports: [
    RouterModule.forChild([
        {path: '', component: ParticipantsComponent},
        {path: 'participant/:id', component: ParticipantComponent},
    ])
],

in my child component i tried to navigate to another component but it says URL Segment: 'participant;id=1001'

this.router.navigate(['participant', {id: data.id}]);

What i have done wrong in here. I tried it it even by removing the params also but it didn't work

Answer 1

When you use this.router.navigate as shown above, you treat the id as a query-param even though it's just a normal route-param. I think you can pass an array of route-segments in order to fix this:

this.router.navigate(['/participants', 'participant', data.id]);

Please note:

The / at the beginning of the route is only needed if your route is a root-level route.