Next.js: link to dynamic route with query params not working client-side

[cztomsik]

Bug report

Note there are 4 similar issues but I think none of them is duplicate.

Describe the bug

I think it's not possible to create a Link for dynamic route with query params in a way which would work both server-side & client-side.

To Reproduce

• create /pages/[id].js
• const { query: { id, foo } } = useRouter()
• console.log(id, foo)
• create /pages/index.js
• <Link href="/[id]" as={{ pathname: '/123', query: { foo: 'bar' } }}><a>...
  
  
  
  • this way, it doesn't propagate to client-side (only id is available, foo is undefined)
  
  
• <Link href={{ pathname: '/123', query: { foo: 'bar' } }}>...
  
  
  
  • this seems to work but it also does request to /pages/123.js and that throws 404 which in turn does full-page reload which actually shows what's expected (but it's super-ugly and much slower as it's just SSR result and not regular client-side route transition)
  
  

Expected behavior

I'd expect href="/[id]" as={{ pathname: '/123', query: { foo: 'bar' } }} to work with both client-side routing and prefetching (if I understand correctly what that 123.js request is)

System information

• OS: macOS
• Browser: latest Chrome
• Next.js: 9.2.2-canary.15

[shouze]

@cztomsik what are similar issues according to you?

We also experience this bug, maybe related to https://github.com/zeit/next.js/issues/10449 which is closed, will will take a look today.

[Janpot]

What happens when you do

<Link 
  href={{ pathname: '/[id]', query: { foo: 'bar' } }} 
  as={{ pathname: '/123', query: { foo: 'bar' } }}
><a>...

?

[shouze]

@Janpot it works correctly when using href... to with dynamic routes, issue can be closed, @cztomsik do you confirm?

[nlopin]

Hello guys! I experience the same behavior. The @Janpot solution fixes it but it is verbose.

It looks like everything that is not in the href pattern is omitted. I don't understand why the query params cannot be parsed in that case. They are parsed if I reload the page

[giovannibenussi]

I'm experiencing the same issue. @Janpot solution worked for me too.
It is supposed to be that way? I'd expect query parameters to be provided automatically because otherwise it becomes very verbose to make it work.

The URL works when rendered on the server, and only fails when transitioning client side, which would involve make code to handle a special case on the client which doesn't seems right.

[milesrichardson]

I was also having this problem, but it was due to a misunderstanding of required link props. The docs (https://nextjs.org/docs/api-reference/next/link) are not very clear about this IMO.

In my case I have a variable called endCursor on a page called [namespace].js and I want the URL to be /[namespace]?after=${endCursor}. To make a link to this page work with both SSR and CSR, you need to pass the fully qualified props to as and href like so:

// This works
const nextLinkProps = {
  as: {
    pathname: `/${namespace}`,
    query: {
      after: endCursor,
    },
  },
  href: {
    pathname: "/[namespace]",
    query: {
      after: endCursor,
    },
  },
}

What I was doing before, which did NOT work:

// This does NOT work (CSR fails as described in this issue)
const badLinkProps = {
  as: {
    pathname: `/${namespace}`,
    query: {
      after: endCursor,
    },
  },
  href: '/[namespace]'
}

I hope this helps someone in the future.

[ijjk]

I'm going to close this in favor of https://github.com/vercel/next.js/issues/9473 since the issue doesn't appear to be specific to dynamic routes and is also referring to query value being missing unless defined in the href