CODEWITHSUNDEEP
angulartypescriptrouteschildren
Nitneuq
Nitneuq

Reputation: 99

Redirect to a children route

I have two components: students-list and student-details

I would like that when I launch the app, I land on localhost:4200/students

When I click on the details, I would like to arrive on localhost:4200/students/1/details (1 = student id)

I am redirected to localhost:4200/students when I put localhost:4200 but when I click on a detail I am not redirected. My button does this:

details(student: Student) {
    console.log('details clicked!')
    this.router.navigate([student.id, 'details']);
  }

and my routes (app-routing.module.ts) are like this:

const routes: Routes = [
  { path: '**' , redirectTo: 'students', pathMatch: 'full'},
  { path: 'students', component: StudentsListComponent, children: [
    { path: '', component: StudentsListComponent },
    { path: ':id/details', component: StudentDetailsComponent }
  ]},
  ];

I don't understand where the problem is coming from. I may have misunderstood how childrens work.

Can you help me ? Thanks

Upvotes: 0

Views: 414

Answers (1)

Kshitij
Kshitij

Reputation: 657

Change your routes order to -

const routes: Routes = [
  { 
      path: 'students', component: StudentsListComponent, 
      children: [
         { path: '', component: StudentsListComponent },
         { path: ':id/:details', component: StudentDetailsComponent }
      ]
  },
  { path: '**' , redirectTo: 'students', pathMatch: 'full'},
];

In details method

details(student: Student) {
    console.log('details clicked!')
    this.router.navigate(['students', {id: student.id, details: 'details'}]);
  }

And see if that is working

Upvotes: 1

Related Questions