react-router中useNavigate返回上一页时如何传递state数据？

navigate(-1) 是浏览器历史栈回退操作，本质是直接跳转回历史栈中已经存在的上一条记录，React Router 不会为已存在的历史记录追加新的state属性，因此你传入的state参数不会被绑定到回退目标页面上，自然无法读取。
而navigate('/')属于主动触发的新导航动作，React Router会为这次导航生成对应的历史记录条目，并把传入的state绑定到该条目上，因此可以正常读取参数。
注意：React Router v6 全版本原生不支持navigate(-1) 回退时传递路由state，这是API本身的设计限制，不存在特殊写法可以直接让该方式传参生效。

方案1：通用返回场景用独立存储传参 #

如果你需要保留navigate(-1)的通用性，不固定回退目标路径，就不要依赖路由state传参，在触发返回前把数据存在全局可访问的临时存储中，目标页面激活时读取即可。
参考实现：

// 触发返回的页面
const navigate = useNavigate();
// 先把要传递的数据存入临时存储
sessionStorage.setItem('backTransferData', JSON.stringify(myData));
// 正常执行回退
navigate(-1);

// 接收数据的目标页面
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const location = useLocation();
useEffect(() => {
  // 优先读取正常路由导航传的state，兜底读取回退场景存的临时数据
  const receivedData = location.state?.data || JSON.parse(sessionStorage.getItem('backTransferData') || 'null');
  if (receivedData) {
    // 在这里写你的数据处理逻辑
    console.log('接收到的参数', receivedData);
    // 读取完成后清除临时存储，避免后续重复读取造成逻辑污染
    sessionStorage.removeItem('backTransferData');
  }
}, [location.key]);

可选的临时存储除了sessionStorage，也可以用React Context、Zustand/Redux等全局状态库，根据项目技术栈选择即可。

方案2：记录上一页路径，用主动导航模拟回退 #

如果你的业务场景里回退行为基本是站内页面跳转，可以在全局维护上一页的访问路径，需要带参返回时直接导航到记录的上一页路径，搭配replace: true达到和回退一致的体验，同时可以正常传递state。
参考实现：

// 在项目根路由组件中维护上一页路径
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

// 用ref存上一页路径，默认值设为首页
const lastPathRef = useRef('/');
const location = useLocation();

useEffect(() => {
  // 每次路由卸载时更新上一页路径
  return () => {
    lastPathRef.current = location.pathname;
  };
}, [location]);

// 把lastPathRef通过Context透传下去，或者封装成自定义hook供业务组件调用

// 业务组件中触发带参返回
const navigate = useNavigate();
// 导航到记录的上一页，替换当前历史记录，和点返回的体验完全一致
navigate(lastPathRef.current, {
  replace: true,
  state: { data: myData }
});

这种写法完全符合React Router的state传参逻辑，不需要额外的存储逻辑，适合路径规则清晰的中后台、常规官网类项目，也方便后续做规模化扩展。

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