NextJS: link button with onClick handler to top-level dynamic route

Question

How would one go about linking a button element to a top-level dynamic route, using:

• NextJS 13.4.9 (using App Router)
• React/dom 18.2.0

My directory structure is as follows:

app/
- [division]
- - page.tsx
- - [team]
- - - page.tsx
- - - [player]
- - - - page.tsx

Example app/[division]/page.tsx:

// app/[division]/page.tsx

export default function Page({ params }: { params: { division: string } }) {
  return <div>My Division {params.division}</div>;
}

From my understanding after reading the docs, the recommended way to go about his would be to import { useRouter } from 'next/navigation' and use it in the onClick handler, where the button is. For example:

// app/page.tsx

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/example')}>
      Example
    </button>
  )
}

In this example, the push method expects a string.

But from my understanding, I'd want something like:

router.push({ division: 'northwest' })

And deeper links would look like this:

router.push({ division: 'northwest', team: 'otters', player: 'sammy-slapstick' })

The push method doesn't allow url objects, like the Page Router useRouter function does.

So, how do I link from a button to top-level (and deeper) dynamic links?

Note, this is the ONLY (top-level) dynamic link in my application.

Other stuff:

• https://stackoverflow.com/a/59791374

I attempted to add onClick={() => router.push({ division: "northwest" }), but this didn't work.

Answer 1

You can use an object with push

See https://nextjs.org/docs/pages/api-reference/functions/use-router#with-url-object

// app/page.tsx

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button
      type="button"
      onClick={() => {
        router.push({
          pathname: 'app/[division]/page',
          query: { division: whateverTheIdOrSlugIs },
        })
      }}
    >
      Example
    </button>
  )
}