Page reloads after few seconds of URL query params change
See original GitHub issueBug 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:
- Created 4 years ago
- Comments:6 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

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 occurredcorrect example
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.