Breadcrumb without child router

Help Requests
1

I have the following router config:

configureRouter(config, router){
    this.router = router;
    config.map([
        { route: [''], redirect: 'user'},
        { route: ['user'], moduleId: './user-list', name: 'userlist', title: 'Users' },
        { route: ['user/:userId'], moduleId: './user-details', name: 'details', title: 'Details' }
    ]);
}

I want to create a breadcrumb that outputs “Users” when I’m on the “user-list” page and “Users/Details” when I’m on the “user-details” page.

Is there any good way to let the router know that the parentInstruction for my ‘details’ route should be the ‘userlist’ route?

Or is there any other good way to define the relation between the routes?

1 Like
2

You can add arbitrary data to your routes

{
  route: ['user/:userId'],
  moduleId: './user-details',
  name: 'details',
  title: 'Details' 
}

Add a settings object:

{
  route: ['user/:userId'],
  moduleId: './user-details',
  name: 'details',
  title: 'Details',
  settings: {
    parentRouteName: 'userlist'
  }
}

Then you can retrieve the parent route name using router.currentInstruction.config.settings.parentRouteName

Although I would use a child router.

app.ts

configureRouter(config, router){
    this.router = router;
    config.map([
        { route: [''], redirect: 'user'},
        { route: ['user'], moduleId: './user', name: 'user', title: 'Users' }
    ]);
}

user.ts (new file)

configureRouter(config, router){
    this.router = router;
    config.map([
        { route: [''], moduleId: './user-list', name: 'userlist', title: 'Listing' },
        { route: [':userId'], moduleId: './user-details', name: 'details', title: 'Details' }
    ]);
}

Then you would be able to get the title of the current route from the router and the title of the parent route from the parentRouter
const breadcrumb = `${router.parent.title} / ${router.title}`

2 Likes
3

Thanks!
I actually did an implementation using exactly the same approach as your first suggestion. It works just fine. I will test it a bit more to see if I find any drawbacks compared to the child router approach.

1 Like