FlowRouter: Page images picking up URL parameters after returning from page with query results{SOLVED]


#1

While using FlowRouter params to create a query string, if I navigate to the page where the string is used to execute a db query and then navigate back. The images on that page break, I seen in dev tools that the image src has the query string attached to it before the image path.

So:

  1. http://localhost:3000/
  1. http://localhost:3000/search/mySearchQuery
  • View page -> return to index page when done via html link
  1. http://localhost:3000/
  • Index page (img src: mySearchQuery/images/myImage)

#2

It seems the route gets stuck when navigating pages with basic html pages. So if I am on index, click and HTML link to another page (lets say “about”). Then navigate home, Flow Router still thinks its on about. I am really hoping all my link do not have to by navigated via js…

update
Not sure if temporary of permanent till i get more insight. But the FlowRouter object sticks to the last navigated page when using FlowRouter to get there. So I created a global function for all links that are accessed by HTML to read their href and drag that into the FlowRouter.go method.

update
Controlling the pages with FlowRouter.go did not help


#3

I made the mistake of thinking setting params was the same as setting queryParams. So when I pulled the params I was actually pulling route path information NOT queries. Thus when navigating to another page, the incorrect route path was set.

Although I do still think this flawed in approach by FlowRouter depending on your point of view.

So given the following code, this will clear up any path issues for correct routing

Incorrect

FlowRouter.route('/search/:queryParams', {
    name: 'search',
    action(params) {
        BlazeLayout.render('searchView');
    }
});

V.S.

Correct

FlowRouter.route('/search', {
    name: 'search',
    action(params, queryParams) {
        BlazeLayout.render('searchView');
    }
});

Then to retrieve the queryParams

Incorrect
FlowRouter.current().params.queryParams

V.S.

Correct
FlowRouter.getQueryParam('vesselCondition')