Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interpolating dynamic href values doesn't preserve extra query params #16851

Closed
jstcki opened this issue Sep 4, 2020 · 4 comments · Fixed by #16878
Closed

Interpolating dynamic href values doesn't preserve extra query params #16851

jstcki opened this issue Sep 4, 2020 · 4 comments · Fixed by #16878
Assignees
Milestone

Comments

@jstcki
Copy link
Contributor

jstcki commented Sep 4, 2020

Bug report

This is a feedback to #16774 which I'm very excited about since it solves a big pain point in most apps I've been writing!

Describe the bug

Adding extra query params to the href prop doesn't construct the expected URL; only the dynamic params are interpolated, while the extra query params are omitted.

To Reproduce

Create a Next.js Link with more params than specified by the dynamic route.

<Link href={ pathname: "/posts/[id]", query: { id: 1, anotherParam: 2 } }><a>...</a></Link>

Navigates to the URL /posts/1 and creates the link <a href="/posts/1">...</a>, omitting anotherParam.

Expected behavior

As I wrote in #14959 :

{ pathname: "/posts/[id]", query: { id: 1, anotherParam: 2 } } should create the URL /posts/1?anotherParam=2 and the link should be <a href="/posts/1?anotherParam=2">...</a>.

System information

  • Version of Next.js: 9.5.4-canary.1
@ijjk
Copy link
Member

ijjk commented Sep 7, 2020

Hi @herrstucki this change should now be available in v9.5.4-canary.5 of Next.js

@jstcki
Copy link
Contributor Author

jstcki commented Sep 7, 2020

@ijjk Works like a charm, thanks!

Another thing I noticed: when I provide fewer params than necessary, the url resolves to the index page without warning, e.g. {pathname: „/[locale]/blog/[id]“, query: {id: 1}} (locale missing) becomes /?id=1. Maybe in this case a warning should be logged or an even error thrown?

@coderdix
Copy link

I'm getting the same error with this component

<Link href={{ pathname: "/members/businesses/edit/[id]", query: { id: business.id } }} > <EditTwoTone className="cursor-pointer focus:outline-none" twoToneColor="#623c68" style={{ fontSize: "20px" }} /> </Link>

with a folder structure 'pages/members/businesses/edit/[id].tsx

i've been working on trying to satisfy the error but to no avail

@power-f-GOD
Copy link

power-f-GOD commented Jan 12, 2022

I'm getting the same error with this component

<Link href={{ pathname: "/members/businesses/edit/[id]", query: { id: business.id } }} > <EditTwoTone className="cursor-pointer focus:outline-none" twoToneColor="#623c68" style={{ fontSize: "20px" }} /> </Link>

with a folder structure 'pages/members/businesses/edit/[id].tsx

i've been working on trying to satisfy the error but to no avail

Same here. 😢

@ijjk , please, see this. 🙏

@vercel vercel locked as resolved and limited conversation to collaborators Jan 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants