Next.js: Page reloads after few seconds of URL query params change

[arjitj87]

Bug report

Describe the bug

On selecting the filters from the dropdown, when I update the query params as given below by either Router.push(), the page reloads itself.
In the first Router.push(), the data re-renders and after a couple of seconds the page reloads itself, while in the second case, the page reloads as soon as I update the URL.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

const selectFilter = filter => option => {
// 1st Case
    Router.push(
      `/[authorID]/courses/?goal=${option.id}&type=plus`,
      `/${authorID}/courses/?goal=${option.id}&type=plus`
    );
// 2nd Case
    Router.push({
      pathname: `/${authorID}/courses`,
      query: {
        goal: option.id,
        type: 'plus'
      }
    });
  };

Demo Video

case 1: https://www.dropbox.com/s/w95ztbviraqhmuf/Case1.mov?dl=0
case 2: https://www.dropbox.com/s/9adskqjttl9id6y/Case2.mov?dl=0

Expected behavior

The page should update the data, i.e its should re-render but shouldn't reload

System information

• OS: [macOS]
• Browser [chrome]
• Version of Next.js: [9.1.6]
  

  Additional context

Add any other context about the problem here.

[AfterThreeYears]

Next requires you to provide the template URL（/[authorID]/courses/?goal=${option.id}&type=plus,） to match the route. In the 1st Case, you provided the correct template URL, but the 2nd Case did not, so a refresh occurred

correct example

const selectFilter = filter => option => {
// 1st Case
    Router.push(
      `/[authorID]/courses/?goal=${option.id}&type=plus`,
      `/${authorID}/courses/?goal=${option.id}&type=plus`
    );
// 2nd Case
    Router.push({
      pathname: `/[authorID]/courses`,
      query: {
        goal: option.id,
        type: 'plus'
      }
    }, {
      pathname: `/${authorID}/courses`,
      query: {
        goal: option.id,
        type: 'plus'
      }
    });
  };