How do I use FlowRouter.go to trigger the URL to be reloaded

Question

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!

Answer 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.