如何通过next/router的router.push向目标路由传递额外自定义数据

你示例中的写法不符合next/router的API规范，无法直接生效，不过可以通过以下几种方案实现同类的自定义参数传递需求：

方案1：通过query参数传递（参数暴露在URL中） #

适合传递非敏感、体积小的参数，刷新页面参数不会丢失。

跳转侧代码 #

router.push({
  pathname: '/my-route',
  query: {
    displayError: 'true'
  }
})

目标页取值代码 #

import { useRouter } from 'next/router'

const MyRoute = () => {
  const router = useRouter()
  // 注意query参数都是字符串类型，需要自行转成需要的格式
  const displayError = router.query.displayError === 'true'
}

方案2：通过state参数传递（参数不暴露在URL中） #

仅适用于Pages Router，参数存在路由历史栈中，不会出现在URL里，刷新页面后参数会丢失，是最接近你需求的实现方式。

跳转侧代码 #

router.push({
  pathname: '/my-route',
  state: {
    custom: {
      displayError: true
    }
  }
})

目标页取值代码 #

import { useRouter } from 'next/router'

const MyRoute = () => {
  const router = useRouter()
  const displayError = router?.state?.custom?.displayError ?? false
}

方案3：通过本地存储传递（刷新页面不丢失） #

适合需要持久化存储的参数，用完建议及时清理避免数据污染。

跳转侧代码 #

sessionStorage.setItem('routeCustomData', JSON.stringify({
  custom: { displayError: true }
}))
router.push('/my-route')

目标页取值代码 #

import { useEffect } from 'react'

const MyRoute = () => {
  useEffect(() => {
    const rawData = sessionStorage.getItem('routeCustomData')
    const data = rawData ? JSON.parse(rawData) : {}
    const displayError = data?.custom?.displayError ?? false
    // 用完清理数据
    sessionStorage.removeItem('routeCustomData')
  }, [])
}

注意事项 #

如果你使用的是Next.js 13+的App Router，next/navigation导出的useRouter不支持直接传递state参数，可选用方案1、方案3，或者搭配全局状态管理工具（如Zustand、Redux）实现临时参数传递。

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