Angular 2 route to the same component with different urls

Question

How can I route to the same component but with different urls and different data, for example

/exports/open  -  ExportsListComponent data: {exportstatus: 'open'}

/exports/submitted - ExportsListComponent data: {exportstatus: 'submitted'}

/exports/completed - ExportsListComponent data: {exportstatus: 'completed'}

this what I tried to do, also I have other routes that use ExportComponent but with similar route like exports/:exportId.

      { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports', component: ExportsListComponent,
      children: [
        { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
        { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
        { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
      ],

The problem I have when I access url with /exports/open it routes to ExportComponent instead of ExportListComponent. How can I route with url to exports/open and route to ExportListComponent, instead of ExportComponent. The issue is when I route to /exports/open it would think 'open' is an id, but instead I need to route to ExportListComponent

have you tried to put exports/:exportId *after* ExportsListComponent path? — Kepotx, Mar 12 '19 at 10:44
Maybe you should use query params instead ? That would be more dynamic, would lighten your routing code (which can expland a lot in an application), and would work pretty much the same. And if you have routes that start with the same word (here being exports), then they should all be grouped, not just the ones you want. — , Mar 12 '19 at 10:44
This means you have to move both of your first routes into the group below them. — , Mar 12 '19 at 10:45
Yes you can. Just think about paths order in your routes. In your case as @andre said you need to move whilecard route after declaring static ones. — Timothy, Mar 12 '19 at 10:47

Andre Kraemer · Accepted Answer · 2019-03-12T10:46:47.857

According the official documentation:

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

So you have to move the exports/:exportId route entry bellow the exports entry.

Like this

  { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
  { path: 'exports', component: ExportsListComponent,
  children: [
    { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
    { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
    { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
  ],
  {path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },

Thanks I will accept this as answer, thanks did not think about the order — AlexFF1, Mar 12 '19 at 10:50

score 0 · Answer 2 · answered Mar 12 '19 at 10:48

That's because your children paths match with the rule above: path: 'exports/:exportId'

You have to rearrange your routes. path: 'exports/:exportId' should come last

Or maybe you should actually change your routes so this ambiguity is completely removed.

Angular 2 route to the same component with different urls

2 Answers2