Angular : Routing to child component with navigate method with a relative route does not work

Question

Example used is given in this stackblitz

This is how routing is structured

    RouterModule.forRoot([
      {
        path: 'login',
        component: LoginViewComponent,
        children: [
          { path: 'home', component: HomeViewComponent },
          { path: 'catalog/:id', component: CatalogViewComponent }
        ]
      },
      { path: '**', redirectTo: 'login' }
    ])
  ],

When I am in the login component, I can go to home component with this absolute route

this.navigate(['login/home']);

I can also use navigateByUrl() like this

this.navigateByUrl(['login/home']);

But I don't understand how to route relatively with navigate()

this.navigate(['home'], { relativeTo: this.route });
this.navigate(['/home'], { relativeTo: this.route });

None of these methods are routing to homeComponent

xinthose · Accepted Answer · 2021-09-16 02:34:33Z

2

Instead of making child routes, I just have another route with the same name in the path:

app-routing.module.ts

{ path: "activity", component: ActivityComponent },
{ path: "activity/orders", component: OrdersComponent },

If I am in the activity component, I navigate to orders by:

this.router.navigate(["orders"], { relativeTo: this.route });`

import and constructor in the activity component

import { Router, ActivatedRoute } from "@angular/router";
constructor(
  private router: Router,
  private route: ActivatedRoute,
) {

answered Sep 16, 2021 at 2:34

xinthose

3,9273 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Enzio Over a year ago

I created this project to understand how relative routing works in Angular. Your answer is more like a workaround and does not explain why it doesn't work in my case.

Collectives™ on Stack Overflow

Angular : Routing to child component with navigate method with a relative route does not work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related