Template didn't rerender when 2 routes render the same template

[ArthurGerbelot]

I have 2 route / and /sell linked to the same Template, but when I switch from one to the other, the template isn't reloaded (so ReactiveVar aren't updated).

This is my router:

FlowRouter.route('/', {
  name: "dashboard",
  action() {
    console.log('go to buy');
    BlazeLayout.render("layout", {nav: "publicNav", main: "dashboard"});
  }
});
FlowRouter.route('/sell', {
  name: "dashboard-sell",
  action() {
    console.log('go to sell');
    BlazeLayout.render("layout", {nav: "publicNav", main: "dashboard"});
  }
});

And the basic template onCreated function:

Template.dashboard.onCreated(function () {
  console.log('Route name: ', FlowRouter.current().route.name)
})

So whem I call / and I try to switch multiple times, I got:

go to buy
Route name:  dashboard
go to sell
go to buy
go to sell

And When I start with /sell (hard refresh) I got:

go to sell
Route name:  dashboard-sell
go to buy
go to sell

How can I avoid that ? Or at least bind a function on this update event ?

[HyperNexus]

This issue is a duplicate of https://github.com/kadirahq/blaze-layout/issues/65.

Would be great to see this resolved. :)

[svda]

+1

[thoragio]

+1

For those who want a hack to work around this issue, I added this IIFE to the onCreated method for the affected template:

(function reloadItOnce() {
    if (window.localStorage) {
      if (!localStorage.getItem('firstLoad')) {
        localStorage.firstLoad = true;
        window.location.reload();
      } else {
        localStorage.removeItem('firstLoad');
      }
    }
  }());

This worked for me since I am not using ReactiveVar/ReactiveDict.

[ArthurGerbelot]

Another way to do it, use the FlowRouter.watchPathChange() function:

Template.testPage.onCreated(function() {
  Tracker.autorun(function() {
    FlowRouter.watchPathChange();
    /* .. some update here .. */
  });
})

[leedongwei]

This is what I did to get around the issue. I reset BlazeLayout with a global trigger that fires for every route and clean out the DOM. Put this on top of your routes.js file.

function resetBlazeLayout() {
  BlazeLayout.reset();
}

FlowRouter.triggers.enter([resetBlazeLayout]);

• I can't find the documentation for BlazeLayout.reset() so it is unlikely to be part of the supported API for BlazeLayout. I'm using v2.3.0.
• You'll need to hunt down bits like onhover-tooltips that are inserted by your UI framework. Not the prettiest solution, but everything about routing is in the same file, which is nice.