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!
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.
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.
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>.
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?
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?