[Solved] - Flowrouter: detect route change

help
1

I guess, I must have overlooked it in the docs, but is there a route change callback in FR? The problem is - not all my routes are rerendered when I hit Back button in the browser. For some routes combinations the route changes, but the layout stays the same.
So I thought I would catch the ‘route change’ event and depending on some conditions rerender the layout manually?

2

If you’ve a route definition like /category/:id and you change from /category/123 to /category/1234 your template doesn’t rerender, because it isn’t a route change. In this case you have to watch reactive for the query parameter “id”.

So for example, you have a “forum” which has a url structure like /forum/post/:id. In this case you have to do something like this:

Template.post.viewmodel({


flowId() {
    return FlowRouter.getParam("id");
},

answers() {
    return Answers.find({postId: this.flowId()});
},
}

So if you move from one thread to another, you will receive new answers because FlowRouter.getParam() is a reactive source.

1 Like
3

I have these two routes in particular:
/postList/:cityId (all posts for that city)
/posts/:postId (particular post)
Each of them renders alright, but if I go from postList to posts via back button - nothing happens.

4

Mhh okay, normally FlowRouter works if you visit another route. Can you go back to your start site, or isn’t it also not working (Start -> City -> Posting and then Posting -> City -> Start)?

5

Yeah, it works alright. I have to admit that I have some complicated logic that intertwines those two routes: postList and posts, and I don’t have the time now to debug it. Hence I asked for a quickfix solution that I could apply.

6

So in the docs we only have the trigger events:

7

Haha! That’s funny: whilst writing quickfix code, I’ve found the actual cause of this inconsistent behaviour! :smile: The error was not with the Flowrouter, mind you, but within my own code.

But in the meantime I’ve still managed to find a ‘callback’ solution for which I’ve started the topic, so if anyone is in need of that functionality - here you are:

Template.tpl.onCreated ->
  this.instance.autorun ->
    console.log FlowRouter.getRouteName()

FlowRouter.getRouteName() is a reactive source, so everytime route name changes, autorun function is called. Mind, that when tpl template is destroyed, that autorun is invalidated. Use Tracker.autorun if you need autorun to persist across the app.