question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Page reloads after few seconds of URL query params change

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
AfterThreeYearscommented, Jan 7, 2020

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'
      }
    });
  };

0reactions
balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Modifying a query string without reloading the page
It does not reload the page, but it only allows you to change the URL query. You would not be able to change...
Read more >
Refresh the Page in JavaScript – JS Reload Window Tutorial
You can use the location.reload() JavaScript method to reload the current URL. This method functions similarly to the browser's Refresh button.
Read more >
Meta refresh - Wikipedia
Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time...
Read more >
How to Construct a URL Search Query with JavaScript
Today We will be dealing with URL query parameters. I will show you how you can save search parameters based on the values...
Read more >
Angular URL State management with Query Params or Route ...
After changing sorting, filtering, pagination options and reload the web page or opening this URL in different browser tab, should load the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found