Reloading child component route reloads the parent parent component

Question

I am having a parent route and under this I have my child routes as follows.

const routes : Routes = [
            {path: 'home', component: HomeComponent, 
            children: [
            { path: 'airetail', component: AiretailplatformComponent},
            { path: 'cpr', component: CprComponent },
            { path: 'snap', component: SnapComponent},
            { path: 'others', component: OthersComponent },
            { path: 'docs', component: DocumentationComponent },
            {path: 'dynamic', component: AiRetailDynamicComponent}
            ],
            {path: '', redirectTo: '/home', pathMatch: full}
        }
     ]

Whenever I am in any of the child routes and try to reload any of the child route components the parent route also gets called. Is there a way I can restrict calling my parent route, here HomeComponent whenever I reload the child route pages?

Answer 1

use the relative route.

in your.component.ts

constructor(
private activateRoute: ActivatedRoute, 
private router: Router)  {

   routeToPath() {
      this.router.navigate(['<your-path>'], { relativeTo: activateRoute 
      })
   }
}

This will only load the child route.