Next.js: Interpolating dynamic href values doesn't preserve extra query params

Created on 4 Sep 2020  Â·  2Comments  Â·  Source: vercel/next.js

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 https://github.com/vercel/next.js/issues/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
bug 2

Most helpful comment

@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?

All 2 comments

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

@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?

Was this page helpful?
0 / 5 - 0 ratings