[Next 9.5.4+] Router.push duplicates query params in production mode, but not in dev mode
See original GitHub issueBug 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:
- clone and install this repo
- run
yarn build
- run
yarn start
- navigate to
localhost:3000
- press
The Button
Expected behavior
I would have expected production to run the same as in dev mode. Like I said above, push
ing 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:
- Created 3 years ago
- Reactions:9
- Comments:7 (3 by maintainers)
Top 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 >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 FreeTop 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
Top GitHub Comments
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 viarouter.push({ pathname: '/[id]', query: { id: 'foo' } })
will causerouter.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 usingrouter.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?
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.