CODEWITHSUNDEEP
angularangular2-routing
PeculiarJoe
PeculiarJoe

Reputation: 41

Angular routing with root identifier and child page

I'm trying to define a unique URL structure, however I cannot seem to get the children / not-found routes to work as I'm expecting.

eg:

www.mysite.com/:id/home www.mysite.com/:id/about-us

I've constructed a routing module, and I'm doing something like this:

const routes: Routes = [
  {
    path: '',
    component: ConciergeComponent,
    pathMatch: 'full'
  },
  {
    component: ConciergeComponent,
    path: ':id',
    children: [{
      path: 'home',
      component: HomeComponent
    }]
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

If I navigate to www.mysite.com, the concierge is called as expected. I'm doing some pre-flight checks based on business rules, before redirecting the user to the correct 'landing page'.

However, when I navigate to /usr-12/home it does not work, instead it gives me the NotFound (which is expecting when a route does not exist). I feel that I'm missing something very small here?

Upvotes: 1

Views: 231

Answers (1)

Shriniwas b
Shriniwas b

Reputation: 336

Try this. 

const routes: Routes = [
  {
    path: '',
    component: ConciergeComponent,
    pathMatch: 'full'
  },
  {
    component: ConciergeComponent,
    path: ':id/home',
    children: [{
      path: 'home',
      component: HomeComponent
    }]
  }
];

Upvotes: 1

Related Questions