React路由history.push传递state后目标页获取值为undefined如何解决

你遇到的路由state取值为undefined，是3个典型问题导致的：

• useCallback 依赖缺失触发闭包陷阱：回调函数内部用到了method状态，但依赖数组仅声明了[history, newLabel]，导致回调捕获的永远是组件首次渲染时的method初始值，渲染时序异常时就会出现state传递失效。
• 带id的跳转分支未传state：你仅在!id || id === newLabel的新建列表分支传入了第二个参数的state，走${ROUTES.newList}/${id}的已有列表项分支完全没传state，这个分支下跳转自然拿不到对应值。
• 目标页取值方式错误：如果使用React Router v6及以上版本，不能直接从手动引入的history实例上读取location，必须用框架提供的useLocation钩子取值，否则拿不到路由匹配时挂载的最新state。

第一步：修正跳转函数逻辑与依赖 #

补全useCallback依赖项，两个跳转分支统一传入state，避免漏写：

const goToListAction = useCallback(
    (id = '') => {
      const routeState = { prop1: method }
      if (!id || id === newLabel) {
        history.push(ROUTES.newList, routeState)
      } else {
        // 补全原有分支缺失的state传参
        history.push(`${ROUTES.newList}/${id}`, routeState)
      }
    },
    // 补全method依赖，解决闭包旧值问题
    [history, newLabel, method],
  )

第二步：目标页正确读取路由参数 #

在目标页面使用官方提供的useLocation钩子获取路由对象，加可选链兜底避免报错：

import { useLocation } from 'react-router-dom'

const NewListPage = () => {
  const location = useLocation()
  // 加默认值兜底，处理异常场景下state为空的情况
  const currentMethod = location.state?.prop1 ?? Method.Central
  
  // 后续业务逻辑直接使用currentMethod即可
  return <div>当前模式：{currentMethod}</div>
}

路由state本质存储在浏览器内存中，页面刷新后会丢失，如果你的场景需要刷新后保留参数，可以选择更稳定的传参方式：

• 把参数拼接在URL查询串中，例如history.push(${ROUTES.newList}/${id}?method=${method})，目标页用useSearchParams钩子解析取值，刷新后参数不丢失
• 把method存入全局状态（Context、Redux、Zustand等），跳转后直接从全局状态读取，完全不依赖路由传参链路

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