如何在react-location中使用useNavigate钩子传递状态/数据？

要在react-location中通过useNavigate传递状态到其他页面，只需在导航配置对象中添加state字段即可，具体实现如下：

1. 发起导航时传递状态 #

修改你的导航代码，在navigate的参数对象里加入state属性，将需要传递的数据放入其中：

import { useNavigate } from 'react-location';

// 组件内部
const navigate = useNavigate();

// 携带状态进行导航
navigate({
  to: path,
  state: {
    userId: 123,
    userInfo: {
      name: "张三",
      age: 28
    }
  }
});

2. 在目标页面接收状态 #

在目标页面中，使用useLocation钩子获取当前路由的位置信息，从中取出传递过来的状态：

import { useLocation } from 'react-location';

// 目标页面组件内部
const location = useLocation();

// 获取传递的状态数据（添加空对象兜底避免解构报错）
const { userId, userInfo } = location.state || {};

// 使用状态数据
console.log(userId); // 输出 123
console.log(userInfo.name); // 输出 "张三"

注意事项 #

• 传递的state数据仅存储在内存中，页面刷新后会丢失，如果需要持久化保存，可结合localStorage或sessionStorage使用
• 确保to指定的路径是已配置的有效路由，否则导航会失败

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