Link and router query should automatically replace dynamic route parts

[jstcki]

Feature request

It would be great if the Link component was smart enough to replace dynamic route parts in pathname automatically based on the query when using the url-object form of href:

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

Currently this renders <a href="/posts/[id]?id=1&anotherParam=2">...</a> which is functional but odd (also it breaks getServerSideProps et al params). So in order to make this work, I have to replace the dynamic parts in pathname with matching query params and stringify a search to construct an as prop manually.

The same issue concerns router.push and router.replace.

Another example to illustrate the issue where it's quite tedious to construct the as prop would be to replace one or more query params of the current (unknown) route to link to another locale:

const LinkCurrentRouteToLocale = ({ locale, ...rest }) => {
  const { pathname, query } = useRouter();
  // pathname being /[locale]/foo or similar
  return <Link href={{ pathname, query: { ...query, locale } }} {...rest} />
}

Describe the solution you'd like

If this was handled out of the box, using { pathname: "/posts/[id]", query: { id: 1, anotherParam: 2 } } would create the URL /posts/1?anotherParam=2 and the link would be <a href="/posts/1?anotherParam=2">...</a>.

I think adding this behavior would be a non-breaking change without any new API. It would be a big improvement over the current behavior. I also don't think that it would be at odds with a more sophisticated approach described in #8207

Describe alternatives you've considered

An alternative could be to explicitly add a params prop to the url object form, e.g.

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

But I don't see the benefit of doing this.

P.S.: I already posted this suggestion in #8207 (comment) but as that RFC had a much bigger scope it probably wasn't the right place to discuss this.

[timneutkens]

Making your suggestion work vs #8207 is the same amount of effort and amount of changes so I'd like to focus on #8207 instead. I've done a lot of work to prepare for that change recently.

[balazsorban44]

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.