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

kellermat · Accepted Answer · 2023-01-04T20:58:30.460

2

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.

edited Jan 04 '23 at 20:58

answered Jan 03 '23 at 06:56

kellermat

2,859
2
4
21

```this.router.navigate(['/participants/participant', data.id])``` this works – Saneth Chandrasekara Jan 03 '23 at 15:36

score 0 · Answer 2 · answered Jan 03 '23 at 15:36

0

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

answered Jan 03 '23 at 15:36

Saneth Chandrasekara

471
4
14

In my own answer actually forgot to add the `/participants` part. Could you please make sure if both suggestions in my updated answer work as well? It could be helpful for other users. I think good practise would be to either pass an array with single segments or pass a string containing the entire route. Your 'solution' is a mix of both of them. This of course works but it's not really ideal since it implies that `'/participants/participant'` must be one string, even though I'm almost sure this is not the case – kellermat Jan 03 '23 at 18:15

Angular Routing Invalid URL Segment

2 Answers2