React+TypeScript中useHistory路由state获取后随即变为undefined求助

DevOps 小满

2026-8-10

React Router 使用 navigate.push 传递 state 后参数变为 undefined 的原因

页面刷新导致 state 丢失
React Router 的路由 state 存储在浏览器内存中，不会写入 URL。一旦目标页面触发刷新（手动刷新、前进后退后刷新），内存中的 state 就会被清空，再次读取自然就是 undefined。如果你的目标页面有自动刷新逻辑，或者用户手动刷新了页面，就会出现这种情况。
重复渲染或逻辑重复执行
检查目标页面组件是否存在不必要的重新渲染，或者读取 state 的逻辑被多次执行。比如组件在 useEffect 中读取 useLocation().state，但组件重新渲染时，由于刷新或其他原因 state 已不存在，就会出现首次有值、后续变为 undefined 的情况。
state 数据不可序列化
如果传入的 values 对象包含不可序列化的内容（比如函数、Symbol、循环引用对象），浏览器存储 history state 时会自动丢弃这些数据，导致后续读取时 state 损坏或变为 undefined。因为浏览器要求 history state 必须是可序列化为 JSON 的纯数据。
路由路径匹配异常
确认目标页面的路由配置和 navigate.push 中的 pathname 是否完全匹配。如果存在嵌套路由、通配符路由优先级问题，可能会先匹配到正确路由拿到 state，随后跳转到其他不匹配的路由，导致 state 丢失。