ember.jsroutesember-router

Ember router breaks on redirect to '/'


I'm having a hard time making my router understand that we are on a certain page and it should be displayed in the navigation as active. The situation is as follows:

 this.route('mainRoute', function() {
     this.route('list');
 });

The path we are interested in is /mainRoute. Unfortunately, there are a lot of legacy links that point to /mainRoute/list. The workaround for this was to redirect from the /mainRoute/list component back to the /mainRoute component.

beforeModel() {
   this.replaceWith('/mainRoute');
}

Now, my issue is that the /mainRoute navigation link will never be seen as active. I've tried adding a path for the /mainRoute ('/', '/mainRoute', 'mainRoute'), I've tried transforming it to a resource and a bunch of other things that passed my mind. But it either won't work, or will go in an infinite redirecting loop.

Any thoughts on it? Thanks so much, I really need a solution for this!


Solution

  • If the navigation links are {{link-to}} components. There is a current-when property you could use here. It accepts either a boolean or a string. The string is a space separated values with the route names you want this link to be active when.

    From the docs

    If you need a link to be 'active' even when it doesn't match the current route, you can use the current-when argument.

    <LinkTo @route='photoGallery' @current-when='photos'>
      Photo Gallery
    </LinkTo>
    
    {{#link-to 'photoGallery' current-when='photos'}}
      Photo Gallery
    {{/link-to}}