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.

[Next 9.5.4+] Router.push duplicates query params in production mode, but not in dev mode

See original GitHub issue

Bug report

Describe the bug

I recently came across this bug while using the “new” router.push method. Using the following

router.push({
    pathname: '/posts/[pid]',
    query: {
        pid: '1234',
        foo: 'bar'
    }
})

In dev, this directs me to /posts/1234?foo=bar

In prod, this directs me to /posts/1234?pid=1234&foo=bar

To Reproduce

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

  1. clone and install this repo
  2. run yarn build
  3. run yarn start
  4. navigate to localhost:3000
  5. press The Button

Expected behavior

I would have expected production to run the same as in dev mode. Like I said above, pushing with this information

{
    pathname: '/posts/[pid]',
    query: {
        pid: '1234',
        foo: 'bar'
    }
}

Should send me to /posts/1234?foo=bar.

System information

  • OS: macOS
  • Browser (if applies): chrome
  • Version of Next.js: 9.5.4, 9.5.5
  • Version of Node.js: 12.16.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
vitosamsoncommented, Nov 20, 2020

I think I’m seeing this or a similar bug as well. I’ve created a minimal reproduction here: https://github.com/vitosamson/next-router-bug-repro. Spin it up (yarn dev), navigate to /[id] and then update the route via the Foo/Bar buttons.

For a route like /[id], pushing a new route via router.push({ pathname: '/[id]', query: { id: 'foo' } }) will cause router.asPath to become /[id]?id=foo instead of /foo.

This is causing issues for me when trying to update the route’s search programatically (I’m not sure if there’s another way I’m supposed to be doing that other than the query object?). I’ve had to resort to using router.asPath for the initial SSR and then ${window.location.pathname}${window.location.search} thereafter when I need to know what the current full path is.

If this is fixed via #18009, any idea when a new version will be cut with that?

0reactions
balazsorban44commented, Jan 28, 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

Next.js router is returning query parameters as undefined on ...
In theory is should run only once for every queryString (which is actually req.query.q ). But I was getting duplicated THUNK.LOAD actions.
Read more >
Next NPM | npm.io
Shallow routing allows you to change the URL without running getInitialProps . You'll receive the updated pathname and the query via the url...
Read more >
SimpleLink™ Wi-Fi® CC3x20, CC3x3x Network Processor
9.5 Device Parameter Querying Through HTTP (Device Tokens). ... Trigger Mode Flow. ... The SimpleLink™ host driver does not use its own processing...
Read more >
Operating 3scale Red Hat 3scale API Management 2.11
The 3scale operator creates monitoring resources, but does not prevent ... insecure -v --version Prints the version of this command --verbose Verbose mode...
Read more >
use-query-params - npm
A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization. Works with React Router out...
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