Search code examples
angularangular-router

Angular route: redirectTo when using multiple param


I have a route like this

const pipelinesRoutes: Routes = [
  {
    path: ':type',
    component: CatalogComponent,
    canActivate: [LoggedInGuard],
    children: [
      {
        path: '',
        component: CatalogContentComponent,
      },
      {
        path: ':domain/:categoryId',
        component: CatalogContentComponent,
      },
    ],
  },
  { path: '', redirectTo: 'skills', canActivate: [LoggedInGuard] },
];

Here i want to redirect my app to skills(:type) if no type is provided , it works fine on start, but once i refresh say having this url.

catalog/skills/technical

it redirect to

catalog/skills/skills/technical

Solution

  • Thanks T. Sunil Rao for helping me. Yes my route was having issue. I was passing empty param while routing with help of

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

    But while refresh it doesn't treat that empty param as param so rediercting.

    catalog/skills/technical doesn't full fill any route so it redirect to skills/ Correct route should be

    const pipelinesRoutes: Routes = [
      { path: '', redirectTo: 'skills', pathMatch: 'full' },
      {
        path: ':type',
        component: CatalogComponent,
        canActivate: [LoggedInGuard],
        children: [
          {
            path: '',
            component: NoDomainContentComponent,
          },
          {
            path: ':domain',
            component: CatalogContentComponent,
            children: [
              {
                path: ':categoryId',
                component: CatalogContentComponent,
              },
            ]
          },
        ],
      },
    ];
    

    Using child of another since i don't want to refresh the component, want to use same component and just filter the data.