next.js push传参数

在 Next.js 中，`push` 方法是用于在客户端路由中导航到另一个页面的方法。如果要传递参数，可以在 `push` 方法的第二个参数中添加参数，例如：

import { useRouter } from 'next/router'

function handleClick() {
  const router = useRouter()
  router.push({
    pathname: '/posts/[id]',
    query: { id: '1' },
  })
}

在这个例子中，我们在 `push` 方法的第二个参数中添加了一个 `query` 对象，用于传递参数。这个对象中的键值对就是要传递的参数。在这个例子中，我们传递了一个名为 `id` 的参数，它的值为 `'1'`。

在接收参数的页面中，可以使用 `useRouter` 钩子函数来获取传递的参数，例如：

import { useRouter } from 'next/router'

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

  return <p>Post: {id}</p>
}

在这个例子中，我们通过 `useRouter` 钩子函数获取了传递的参数，并将其渲染到页面中。

需要注意的是，如果要在服务端渲染的页面中传递参数，应该使用 `getInitialProps` 方法，而不是 `push` 方法。

相关问题

next.js 13.4.4 push传参数

在 Next.js 13.4.4 中，传递参数的方法与之前的版本略有不同。可以使用 `Router.push` 方法来进行页面跳转，并通过 `as` 属性来传递参数。例如：

import { useRouter } from 'next/router'

function handleClick() {
  const router = useRouter()
  router.push('/posts/[id]', '/posts/1')
}

在这个例子中，我们使用 `Router.push` 方法来跳转到 `/posts/[id]` 页面，并通过 `as` 属性将参数传递进去。在这个例子中，我们传递了一个名为 `id` 的参数，它的值为 `'1'`。

在接收参数的页面中，可以通过 `useRouter` 钩子函数来获取传递的参数，例如：

import { useRouter } from 'next/router'

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

  return <p>Post: {id}</p>
}

在这个例子中，我们通过 `useRouter` 钩子函数获取了传递的参数，并将其渲染到页面中。

需要注意的是，如果要在服务端渲染的页面中传递参数，应该使用 `getServerSideProps` 或 `getStaticProps` 方法，而不是 `Router.push` 方法。

next.js next/navigation 携带参数

在 `next.js` 和 `next/navigation` 中，您可以通过多种方式向页面传递参数和数据。下面是一些常见的方法：

1. 使用查询字符串：您可以在URL中添加查询字符串来携带参数。例如，您可以在链接中添加 `?id=123` 来传递 `id=123` 参数。

2. 通过URL路径：您可以将参数作为URL路径的一部分来传递参数。例如，您可以创建一个动态路由`/post/[id]`，其中`[id]`表示占位符，然后使用`/post/123`的URL来传递`id=123`参数。

3. 通过state参数：您可以使用 `next/router` 模块的 `push()` 函数或 `next/link` 组件的 `href` 属性中的 `state` 参数来传递数据。例如，您可以使用以下方式在 `next/link` 组件中传递数据：

   <Link href={{ pathname: '/post', query: { id: '123' } }} as='/post/123' state={{ data: 'hello' }}>
     <a>Post</a>
   </Link>

然后在 `post` 页面中，您可以使用 `router` 对象的 `state` 属性来访问传递的数据，例如：

   import { useRouter } from 'next/router'

   function Post() {
     const router = useRouter()
     const data = router?.state?.data

     return (
       <div>
         <h1>Post {router.query.id}</h1>
         <p>Data: {data}</p>
       </div>
     )
   }

   export default Post

综上所述，`next.js` 和 `next/navigation` 提供了多种方式来携带参数和数据。您可以根据自己的需求选择最适合的方法来传递数据。