Router navigate to child route - Angular 6

Question

I've defined my routes like this:

const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
    { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

and like this:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(list:list)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

I am interested how I can navigate to ListPage or ProfilePage using router .navigate() method in component or routerLink in some html element.

I tried something like this

this.router.navigate(['tabs/profile']);

or

this.router.navigate(['profile']);

or

this.router.navigate(['tabs(profile:profile)']);

and got this error :

Error: Cannot match any routes. URL Segment: ''

score 32 · Answer 1 · edited Dec 03 '18 at 11:36

32

Try:

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

This solved my problem. Happy coding :)

edited Dec 03 '18 at 11:36

d219

2,707
5
31
36

answered Dec 03 '18 at 09:01

shivam gaddh

321
2
3

2

don't forget to add `import { ActivatedRoute } from '@angular/router';` – Quad Coders Aug 09 '20 at 23:41

score 19 · Answer 2 · edited Oct 26 '20 at 16:07

19

this.router.navigate(['/list'], {relativeTo: this.route});      //absolute
this.router.navigate(['./list'], {relativeTo: this.route});     //child
this.router.navigate(['../list'], {relativeTo: this.route});    //sibling
this.router.navigate(['../../list'], {relativeTo: this.route}); //parent
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

You'll find here more information

edited Oct 26 '20 at 16:07

Raphaël Balet

6,334
6
41
78

answered Oct 11 '19 at 14:44

shiva

209
2
5

3

Welcome to stackoverflow. In addition to the answer you've provided, please consider providing a brief explanation of why and how this fixes the issue. – jtate Oct 11 '19 at 15:11
Not useful. Consider adding details on what each option does. – yuva Jul 09 '20 at 19:54
1

Even tho this is lacking a bit of text, it **did** help. The comments are enough to get the point. – C4d Oct 21 '22 at 08:27

score 8 · Answer 3 · answered Nov 08 '18 at 13:06

8

If you want to navigate to the list route you need to make the angular know that its a child route of tabs

this.router.navigate(['/tabs/list']); or this.router.navigate(['tabs','list']);

In router navigate you need to pass routes as an array of string so now the angular will find for the parent tabs and checks the child route if it is nothing it will navigate to pathMatch: 'full' if not it will navigate to the specific child route

In routerLink you can use the same array to match the route

Thanks, Happy coding !!

answered Nov 08 '18 at 13:06

Rahul

2,040
2
11
29

I don't know what I'm doing wrong but same error is displayed for both options. "Error: Cannot match any routes. URL Segment: 'tabs'" – Ante Ereš Nov 08 '18 at 13:17
You are using lazy loading right - when you try to navigate to `TabsPageModule` the route will be empty and try to find the path so i have doubt here - `redirectTo: '/tabs/(offers:offers)'` what does this meant to be because i don't see any route with name `offers` here the code get confused – Rahul Nov 08 '18 at 13:25
just edited code, but when I change to redirectTo: '/tabs/(list:list)' this is not working – Ante Ereš Nov 08 '18 at 14:34
Just make it as `/tabs/list` this will render `ListPage` component the initial navigation will work or use `/tabs` this will render the `TabsPage` component - Finally i don't think the `children` routes require a `pathMatch` remove that and check once – Rahul Nov 08 '18 at 15:37
In the children array for the `path=" "` bind the component `ListPage` don't redirect to the same `list` route remove `redirect` and remove `pathMatch` and add `component` so now if it's only 'tabs' will render both `TabsPage` and `ListPage` component when the route is `tabs` hope this will work - and in your parent redirect just mention the route name as 'tabs' it will automatically pick that route – Rahul Nov 08 '18 at 17:31

score 2 · Answer 4 · answered Jun 08 '19 at 19:44

It depends on from which component you wish to navigate from.

From Tabs to ListPage:

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

If you're navigating from ProfilePage to ListPage (which are siblings) then, you need to use this:

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

In the above code, route is the ActivatedRoute object and so it will enable relative navigation from current route. You can inject it in the constructor like this:

constructor(private route: ActivatedRoute)

I was also facing the same problem once and tried everything but nothing worked. In the end, Visual Studio Code's Intellisense helped me with this. Hope it helps somebody.

Pankaj Parkar · Answer 5 · 2018-11-08T13:16:49.663

1

Mention outlets in the routerLink while navigating to particular outlet.

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

which will eventually generates below route

http://localhost:4200/tabs/profile/(profile:profile//list:none)

edited Nov 08 '18 at 13:16

answered Nov 08 '18 at 13:10

Pankaj Parkar

134,766
23
234
299

Ante Ereš · Accepted Answer · 2019-10-30T16:00:12.547

1

I found solution by adding profile path below '' and 'tabs' path:

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

Now I am able to navigate to profile with

  this.router.navigate(['profile']);

I forgot to add this path in tabs.router.module.ts. Because of that I was getting mentioned error

edited Oct 30 '19 at 16:00

answered Oct 30 '19 at 15:44

Ante Ereš

623
4
8
24

Router navigate to child route - Angular 6

6 Answers6

Linked