FlowRouter.go(); and Meteor

help
1

So I been working on one of my first projects in meteor and I am using FlowRouter. However I am running across a little issue where when they click the link to go to their profile it will go to the link but requires a refresh to get it to show their pallets they submitted. Here is a gif of the issue. If anyone could help or point me in the right direction that would be great.

2

I know this post doesn’t answer your question, but just so you know:

Seeing that FlowRouter and Picker are abandoned with many PRs left un-merged, I decided to “restart” both.

Please see: FineRouter and FinePicker. Please submit PRs and ask for contributor roles to get more involved.

3

Are you using layouts?

4

Yes, using the BlazeLayout.render(); with FlowRouter.

5

Can you share the code you’re using, or point us to the repo?

6

I solved this issue on my own a few minutes ago after coming home. I found the option to use was

FlowRouter.go();
locaiton.reload();

Instead of the

FlowRouter.redirect();
location.reload();

and

FlowRouter.go();
7

I did some research and it looks like this behaviour is intentional. @arunoda had the following to say in this GitHub issue:

We are doing some checks on FlowRouter.go to stop running route if called multiple times. Which means routes are idempotent.

if I’m in domain.com/posts/1234 and want to route over to domain.com/posts/5678, only the URL will get updated but no redirection actually takes place. Is there any way to accomplish this without requiring a complete refresh? Seems like a super common use case…

8

I hope I’ve understood your question.

Basicly you need to reactivly fetch information from the user’s URL and use this to decide what to display.

Lets say you have a route like this in your template:

FlowRouter.route(’/posts/:userId’, {
name: ‘Posts.list’,
action() {
BlazeLayout.render(‘App_body’, {main: ‘Posts_list_page’});
}
});

And a helper like this in Posts_list_page

user(){
let userId = Flowrouter.getParam(‘id’);
return Meteor.users.findOne(userId);
}

And access this in your template like this:

{{ user.username }}

You may now navigate from domain.com/posts/1234 to domain.com/posts/5678 and see that the data on the page changes.

You will have to subscribe to the correct data for this to work.

Read more about this in the guide.

9

Well, just make sure that when you get the post number it is done inside an autorun. Something like:

Template.ViewPost.onCreated({function () {
  const self = this;
  self.autorun(function () {
    self.subscribe('Posts', {postNo: FlowRouter.getParam('postNo')});
  ...
10

Thanks for the replies. Why is there a difference when routing between middleware (?) paths in the first place? Some sort of technical issue?

11

This is what my route looks like:

FlowRouter.route('/post/:_id', {
  action (params, queryParams) {
    mount(MainLayout, {
      navbar: () => (<Navbar />),
      content: () => (<Post />),
      footer: () => (<Footer />)
    })
  }
})

So, if I were to do something like this (from domain.com/post/1234):

FlowRouter.go('/post/' + 5678)
FlowRouter.reload()

The route action should get triggered again and Navbar, Post and Footer will remount, thus having the desired effect. However, that doesn’t happen.

12

I don’t really understand your question. You don’t need to use reload() when navigating to another URL. Just listen to the URL in your template with Flowrouter.getParam(‘id’). Subscribe to the correct data and render it in the template.

Read the guide and look at the source for the Todo app associated with the guide, you will soon understand how they handle routing, subscriptions and data in templates.

13

Ok I figured this out. Once I switched from using TrackerReact to createContainer everything magically works. Previously, I had to (as per your suggestion) wrap the constructor in Tracker.autorun, which seemed too much like an anti-pattern for my liking. Cheers!