Next 13 页面间数据传递问题求助：表单数据传至卡片页

Next.js 13 分 App Router（新路由系统）和 Pages Router（旧路由系统）两种实现方案，你之前尝试失败大概率是混淆了两种路由的 API 或未处理客户端组件限制，以下是具体解决方法：

一、App Router（推荐使用） #

App Router 中需使用 next/navigation 提供的 useRouter 钩子，且涉及路由操作的组件必须标记为客户端组件（添加 'use client' 指令）。

1. 表单页面（提交数据） #

'use client'

import { useRouter } from 'next/navigation'

export default function FormPage() {
  const router = useRouter()

  const handleSubmit = (e) => {
    e.preventDefault()
    // 解析表单数据
    const formData = new FormData(e.target)
    const submitData = Object.fromEntries(formData)
    
    // 跳转并携带 state 数据
    router.push('/print-card', {
      state: { formData: submitData }
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" placeholder="用户名" required />
      <input name="email" type="email" placeholder="邮箱" required />
      <button type="submit">生成打印卡片</button>
    </form>
  )
}

2. 卡片展示页面（接收数据） #

同样需要标记为客户端组件，通过 useRouter 的 state 属性获取传递的数据：

'use client'

import { useRouter } from 'next/navigation'

export default function PrintCardPage() {
  const router = useRouter()
  // 从路由 state 中取数据，做空值判断避免报错
  const { formData } = router.state || {}

  if (!formData) {
    return <div>请先通过表单生成卡片</div>
  }

  return (
    <div className="print-card">
      <h2>{formData.username}</h2>
      <p>邮箱：{formData.email}</p>
      <button onClick={() => window.print()}>打印卡片</button>
    </div>
  )
}

注意事项 #

• router.state 仅存储在内存中，刷新页面后数据会丢失，如果需要持久化数据，可以在表单提交时将数据存入 localStorage，在卡片页面读取；
• 所有使用 useRouter 的组件必须添加 'use client'，否则会报错（App Router 默认是服务器组件，无法访问客户端路由 API）。

二、Pages Router（旧路由系统） #

如果你仍在使用 Pages Router，使用 next/router 的 useRouter 钩子，用法和 React 的 useNavigate 更接近：

1. 表单页面（提交数据） #

import { useRouter } from 'next/router'

export default function FormPage() {
  const router = useRouter()

  const handleSubmit = (e) => {
    e.preventDefault()
    const formData = new FormData(e.target)
    const submitData = Object.fromEntries(formData)

    router.push({
      pathname: '/print-card',
      state: { formData: submitData }
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容同前 */}
    </form>
  )
}

2. 卡片展示页面（接收数据） #

import { useRouter } from 'next/router'

export default function PrintCardPage() {
  const router = useRouter()
  const { formData } = router.state || {}

  if (!formData) {
    return <div>请先填写表单</div>
  }

  return (
    <div className="print-card">
      {/* 展示数据同前 */}
    </div>
  )
}

你之前失败的可能原因 #

1. 在 App Router 中错误导入了 next/router（这是 Pages Router 的 API），应该用 next/navigation；
2. App Router 中的组件未添加 'use client' 指令，导致无法调用 useRouter；
3. 跳转时未正确传递 state 参数（App Router 的 router.push 第二个参数是包含 state 的对象）。

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