如何将button元素链接到顶级dynamic route，使用：

• NextJS 13.4.9（使用App Router）
• React/dom 18.2.0

我的目录结构如下：

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

字符串
示例app/[division]/page.tsx：

// app/[division]/page.tsx

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

型
从我阅读文档后的理解来看，推荐的方法是import { useRouter } from 'next/navigation'并在onClick处理程序中使用它，按钮就在那里。举例来说：

// 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>
  )
}

型
在本例中，push方法需要一个字符串。
但据我所知，我想要这样的东西：
router.push({ division: 'northwest' })个
更深层次的链接看起来像这样：
router.push({ division: 'northwest', team: 'otters', player: 'sammy-slapstick' })个
push方法不允许url对象，就像Page Router useRouter函数一样。
那么，如何从按钮链接到顶级（和更深层次）动态链接？
注意，这是我的应用程序中唯一的（顶级）动态链接。
其他东西：

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

我尝试添加onClick={() => router.push({ division: "northwest" })，但这不起作用。