3

I'm playing around with Pagination using React/Meteor. By passing a limit parameter in the URL I can define the number of results that should be displayed.

FlowRouter.route('/books/:_booksLimit?', {
    action() {
        mount(Es6MainLayout, {
            content: (<BookSearchWrapper/>)
        })
    }
})

However when I try and increment the limit to load more, the URL gets generated but FlowRouter does not actually reload the page. I get the feeling that I'm taking the wrong approach here. How should I trigger the URL to actually reload?

Currently this sets the URL to books/20 but the page doesn't actually reload and no additional results are displayed.

loadMore() {
    FlowRouter.go('/books/20')
}

Any help appreciated!

nateyolles
  • 1,851
  • 5
  • 17
  • 23
ElJefeJames
  • 295
  • 3
  • 16
  • How do you access the route parameter `_booksLimit`? For me, at least, the route action does get rerun after calling `FlowRouter.go` with a different url parameter (or even the same parameter, for that matter). I suspect that however you access the parameter is not updated when the route changes. – Waiski Sep 10 '16 at 08:10
  • I access it using: var limit = FlowRouter.getParam('_booksLimit'). It seem's like I should actually be setting this as prop though in order to re-render the component on change – ElJefeJames Sep 11 '16 at 00:33

1 Answers1

1

In order for the component to re-render, I believe the best approach is to pass it the limit as a property.

I am not sure how your data load is handled, but I assume it is some type of higher-order component.

Therefore, something like the following should work:

FlowRouter.route('/books/:_booksLimit?', {
    name: 'books.list',
    action({_booksLimit}) {
        mount(Es6MainLayout, {
            content: () => (<BookSearchWrapper limit={_booksLimit} />)
        });
    }
});

If it does not, make sure that you are taking care of loading the data according to the limit prop.

MasterAM
  • 16,283
  • 6
  • 45
  • 66