Angular route: redirectTo when using multiple param

Viewed 363

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
1 Answers

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.

Related