next.js next/navigation useRouter携带参数

在 `next.js` 中，您可以使用 `useRouter` 钩子来访问路由信息和参数。`useRouter` 钩子返回一个 `router` 对象，该对象包含有关当前路由的信息，例如当前路径、查询参数、路由参数等。

以下是如何在 `next.js` 中使用 `useRouter` 钩子来访问路由参数的示例：

1. 首先，在页面中导入 `useRouter` 钩子：

   import { useRouter } from 'next/router'

2. 然后，在页面组件中使用 `useRouter` 钩子来访问路由参数：

   function Post() {
     const router = useRouter()
     const { id } = router.query

     return (
       <div>
         <h1>Post {id}</h1>
       </div>
     )
   }

   export default Post

在上面的示例中，我们从 `router.query` 对象中解构出 `id` 参数，并将其渲染到页面中。

如果您需要访问路由对象的其他属性或方法，例如 `pathname`、`push()`、`replace()` 等，都可以通过 `useRouter` 钩子来访问。例如，以下示例演示如何使用 `useRouter` 钩子来访问 `pathname` 属性和 `push()` 方法：

function MyComponent() {
  const router = useRouter()

  function handleClick() {
    router.push('/about')
  }

  return (
    <div>
      <h1>Current path: {router.pathname}</h1>
      <button onClick={handleClick}>Go to About page</button>
    </div>
  )
}

export default MyComponent

综上所述，`useRouter` 钩子是在 `next.js` 中访问路由信息和参数的常用方法。您可以使用它来访问路由参数、路由对象的属性和方法，并根据需要执行导航操作。