Updating Query Params with shallow causes page re-render / refresh, scroll to top effect

[Dellybro]

Bug report

Describe the bug

When updating the query params of a route using the following code

router.push(`/jobs?${query}`, `/jobs?${query}`, {
          shallow: true,
});

The page scrolls to the top, and causes a "refresh/rerender"

A clear and concise description of what the bug is.

To Reproduce

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

1. Create a page which is longer then your screen
2. Update query params progammatically

Expected behavior

I would expect the page not to rerender, stay in the current scroll spot and update the query params without any extra things going on

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOs
• Chrome
• Version of Next.js: 9.3.4
• Version of Node.js: 12.x

[balazsorban44]

Take a look at the docs: https://nextjs.org/docs/routing/shallow-routing

By definition of the useRouter behaviour, there has to be a re-render to update the router.query object. shallow will only disable any data fetching mechanisms like getStaticProps or getInitialProps

[jamesmosier]

Per the docs, your shallow routing code would need to look like:

router.push(`/jobs?${query}`, undefined, {
  shallow: true,
});

[sanath-git]

@jamesmosier This works. Thanks :)