使用useNavigate实现浏览器回退时保留状态值的问题

调用navigate(-1, { state: ... })时，React Router只是触发浏览器回退到历史栈中已存在的上一条记录，并不会修改该记录的state参数——你传入的state会被直接忽略。而直接跳转至/prepage是创建新的历史条目，state会被附加到这个新条目上，因此目标页面能正常读取。

下面提供几种可行的解决方式，根据你的场景选择：

1. 替换历史记录（推荐，适配React Router逻辑） #

如果你明确知道上一页的路径，用replace模式跳转至该页面，这样既不会新增历史条目（和navigate(-1)的历史栈行为一致），又能传递state：

const backToPrePage = useCallback(() => {
  navigate("/prepage", {
    state: { userID: userID, currentState: currentState },
    replace: true // 替换当前历史条目，而非新增
  });
}, [navigate, currentState, userID]);

2. 使用全局状态管理 #

如果需要传递的状态比较复杂，或者多个页面都需要访问，直接将状态存入全局状态容器（比如Context API、Redux）：

• 当前页：更新全局状态中的userID和currentState
• 上一页：直接从全局状态读取对应值，无需依赖路由state

3. 序列化到URL参数 #

如果状态可以被序列化，将参数拼接为URL查询参数传递，这种方式兼容性最好（刷新页面也不会丢失）：

// 当前页跳转逻辑
const backToPrePage = useCallback(() => {
  const encodedState = encodeURIComponent(JSON.stringify(currentState));
  navigate(`/prepage?userID=${userID}&currentState=${encodedState}`, { replace: true });
}, [navigate, currentState, userID]);

// 上一页读取逻辑
import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const userID = searchParams.get('userID');
const currentState = JSON.parse(decodeURIComponent(searchParams.get('currentState')));

4. 直接修改浏览器历史栈（不推荐，需谨慎） #

通过window.history直接修改上一条历史记录的state，再执行回退。注意这种方式绕过了React Router的内部状态管理，可能引发兼容性问题：

const backToPrePage = useCallback(() => {
  // 获取并修改上一条历史记录的state
  const prevState = window.history.state || {};
  window.history.replaceState(
    { ...prevState, state: { userID: userID, currentState: currentState } },
    '',
    window.location.href
  );
  // 执行回退
  window.history.back();
}, [currentState, userID]);

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