使用useNavigate传递state至其他组件时获取到null的问题排查

以下是可能导致你接收组件中 location.state 为 null 的原因及对应解决方法：

1. 修正 navigate 的调用方式 #

你当前使用传入 location 对象的写法存在格式风险，改用 React Router 官方推荐的「路径字符串 + 配置对象」形式：

// 原写法
navigate({ pathname: "/vertical_section", state:{formdef_data: res.data}});

// 修改为
navigate("/vertical_section", { state: { formdef_data: res.data } });

2. 调整 useEffect 的依赖项 #

接收组件的 useEffect 依赖为空数组，可能错过路由跳转后的 state 更新（如组件复用场景），将 location 加入依赖数组：

const location = useLocation();
useEffect(() => {
  console.log("data", location.state);
  if (location.state?.formdef_data) {
    setdefLockData(location.state.formdef_data);
  }
}, [location]); // 加入 location 作为依赖，确保 state 更新时重新执行

3. 验证接口返回数据有效性 #

先确认接口返回的 res.data 是否为有效数据，在 navigate 前打印检查：

FormServices.AddFormDef(formDef).then((res) => {
  console.log("接口返回数据:", res.data); // 确认数据不为 null/undefined
  setformDefData(res.data);
  navigate("/vertical_section", { state: { formdef_data: res.data } });
});

如果 res.data 本身就是 null，传递的 state 自然也会是 null。

4. 注意页面刷新导致的 state 丢失 #

location.state 存储在浏览器内存中，页面刷新（F5/刷新按钮）后会被清空。若刷新后出现 null，需改用持久化方案：

• 临时存储：用 localStorage/sessionStorage 暂存数据，接收组件读取后再清空
• 全局状态：通过 Redux、Context API 管理全局状态

5. 检查路由配置正确性 #

确认路由表中 /vertical_section 对应的组件就是你编写的接收组件，无重定向、组件匹配错误等配置问题。

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