Next.js 13.4.9客户端组件页面跳转时如何传递数据？

下面给你两种常用的实现方案，适配你当前的代码场景：

方法1：通过URL查询参数传递（适合简单数据） #

这种方式会把数据暴露在URL上，适合传递字符串、数字这类轻量数据。

主页面修改 #

先从next/navigation导入useRouter，然后在点击事件里拼接查询参数跳转：

'use client'
import { useRouter } from 'next/navigation'

const HomePage = () => {
  const router = useRouter()

  const btnHandler = () => {
    // 示例：传递title和id两个参数
    router.push('/create-upcoming?title=NewContent&id=123')
  }

  return (
    <button onClick={btnHandler} className='border border-[#C4C4C4] rounded-full px-6 py-2 text-[#4B4B4B]'>
      Add Upcoming Content
    </button>
  )
}

export default HomePage

目标页面获取数据 #

App Router的页面组件可以直接接收searchParams参数，用它来获取传递的值：

const CreateUpcomingPage = ({ searchParams }) => {
  const title = searchParams.title
  const id = searchParams.id

  return (
    <div id="container" className="fixed inset-0 bg-white flex justify-center items-center">
      <div>
        <p>标题：{title}</p>
        <p>ID：{id}</p>
      </div>
    </div>
  )
}

export default CreateUpcomingPage

方法2：通过router.push的state传递（适合复杂/敏感数据） #

这种方式数据不会显示在URL中，但页面刷新后数据会丢失，适合传递对象、数组这类复杂数据。

主页面修改 #

同样导入useRouter，跳转时在第二个参数里传入state：

'use client'
import { useRouter } from 'next/navigation'

const HomePage = () => {
  const router = useRouter()

  const btnHandler = () => {
    // 构造复杂数据
    const contentData = {
      title: 'New Upcoming Content',
      description: 'Test content description',
      tags: ['tech', 'daily']
    }
    // 跳转并携带state数据
    router.push('/create-upcoming', { state: contentData })
  }

  return (
    <button onClick={btnHandler} className='border border-[#C4C4C4] rounded-full px-6 py-2 text-[#4B4B4B]'>
      Add Upcoming Content
    </button>
  )
}

export default HomePage

目标页面获取数据 #

目标页面需要加上'use client'指令（因为要使用useRouter），然后通过router.state获取数据：

'use client'
import { useRouter } from 'next/navigation'

const CreateUpcomingPage = () => {
  const router = useRouter()
  const contentData = router.state

  return (
    <div id="container" className="fixed inset-0 bg-white flex justify-center items-center">
      {contentData && (
        <div>
          <p>标题：{contentData.title}</p>
          <p>描述：{contentData.description}</p>
          <p>标签：{contentData.tags.join(', ')}</p>
        </div>
      )}
    </div>
  )
}

export default CreateUpcomingPage

内容的提问来源于stack exchange，提问作者Ibnul