Search code examples
angularangular-router

Dynamic angular router path

This is my current router:

const routes: Routes = [
  { path: '',  component: HomeComponent },
  { path: 'filter',  component: FiltersPageComponent},
  { path: 'filter/:continent',  component: FiltersPageComponent},
  { path: '**', canActivate: [RouteLoader], component: ErrorComponent},
];

I have a dynamic url that is created when a user searches for multiple destinations.

Example of url: localhost:4200/filter/africa/botswana/europe/spain/asia/china

Can I create 1 path that will accept this url without making multiple paths like below? 

{ path: 'filter/:test/:test2/:test3/:test4/:test5/:test6',  component: FiltersPageComponent}
Solution

  • The solution I ended up using was this:

    { path: 'filter',  component: FiltersPageComponent,
  children: [
    { path: '**', component: FiltersPageComponent}
  ]
},

    The only problem I can think of when using this method is that the user can randomly put anything after filter/ in the url and it will still redirect to the filtersPageComponent.