如何使用next/navigation的useRouter向其他页面传递对象？

App Router 下的 useRouter（来自next/navigation）不支持 Pages Router 那种通过query字段传对象的写法，你可以用以下几种实用方式实现：

1. 通过URL查询参数传递（最通用） #

把对象序列化为JSON字符串，作为查询参数拼到URL上，目标页面再解析还原。适合非敏感、可序列化的数据。

源页面代码修改： #

import { useRouter } from 'next/navigation'  

const router = useRouter()
const data = { key: 'value', nested: { foo: 'bar' } }

// 序列化对象并转义特殊字符，避免URL解析异常
const encodedData = encodeURIComponent(JSON.stringify(data))
router.push(`/dashboard?data=${encodedData}`)

目标页面（/dashboard）获取数据： #

如果是Client Component：

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

export default function Dashboard() {
  const searchParams = useSearchParams()
  const dataStr = searchParams.get('data')
  const data = dataStr ? JSON.parse(decodeURIComponent(dataStr)) : null

  return <div>传递的数据：{data?.key}</div>
}

如果是Server Component：

export default function Dashboard({ searchParams }) {
  const dataStr = searchParams.data
  const data = dataStr ? JSON.parse(decodeURIComponent(dataStr)) : null

  return <div>传递的数据：{data?.key}</div>
}

2. 通过React Context/状态管理传递（适合不暴露在URL的场景） #

如果数据敏感或者不想出现在URL里，可以用React Context或Redux、Zustand这类状态管理工具，跳转前把数据存入状态，目标页面直接读取。

示例（基于React Context）： #

1. 创建全局Context：

'use client'
import { createContext, useContext, useState } from 'react'

const AppContext = createContext()

export function AppProvider({ children }) {
  const [transferData, setTransferData] = useState(null)

  return (
    <AppContext.Provider value={{ transferData, setTransferData }}>
      {children}
    </AppContext.Provider>
  )
}

export function useAppContext() {
  return useContext(AppContext)
}

2. 在根布局（app/layout.jsx）中包裹Provider：

import { AppProvider } from './app-context'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  )
}

3. 源页面设置数据并跳转：

'use client'
import { useRouter } from 'next/navigation'
import { useAppContext } from './app-context'

const SourcePage = () => {
  const router = useRouter()
  const { setTransferData } = useAppContext()

  const handleNavigate = () => {
    const data = { key: '敏感数据' }
    setTransferData(data)
    router.push('/dashboard')
  }

  return <button onClick={handleNavigate}>前往控制台</button>
}

export default SourcePage

4. 目标页面读取数据：

'use client'
import { useAppContext } from './app-context'

export default function Dashboard() {
  const { transferData } = useAppContext()

  return <div>敏感数据：{transferData?.key}</div>
}

注意：这种方式页面刷新后数据会丢失，仅适合纯客户端跳转且无需持久化的场景。

3. 通过Cookies传递（适合需要持久化的敏感数据） #

如果数据需要跨页面刷新保留，且不想暴露在URL，可以用Cookies存储。

源页面设置Cookie并跳转： #

'use client'
import { useRouter } from 'next/navigation'
import { setCookie } from 'cookies-next'

const router = useRouter()
const data = { key: '需要持久化的数据' }

// 设置Cookie，可配置过期时间、路径等参数
setCookie('transferData', JSON.stringify(data), { path: '/' })
router.push('/dashboard')

目标页面读取Cookie： #

Client Component：

'use client'
import { getCookie } from 'cookies-next'

export default function Dashboard() {
  const dataStr = getCookie('transferData')
  const data = dataStr ? JSON.parse(dataStr) : null

  // 用完可删除Cookie避免残留
  // deleteCookie('transferData')

  return <div>持久化数据：{data?.key}</div>
}

Server Component：

import { cookies } from 'next/headers'

export default function Dashboard() {
  const cookieStore = cookies()
  const dataStr = cookieStore.get('transferData')?.value
  const data = dataStr ? JSON.parse(dataStr) : null

  return <div>持久化数据：{data?.key}</div>
}

内容的提问来源于stack exchange，提问作者Marcelo Henrique Fonseca