如何在React Router v6中跳转至上一页并传递当前页面状态？

问题原因 #

navigate(-1)的本质是回退到浏览器历史栈中已存在的上一条历史记录，这条记录的state是在当初跳转到当前页时就确定好的。你没法通过回退操作去修改这条已有历史记录的state，所以传入的{state: state}完全不会被应用，返回上一页后自然拿不到你想要的状态值。

可行解决方案 #

方案1：替换当前页历史记录后回退

先替换当前页的历史记录，把要传递的state嵌入进去，再执行回退操作：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

// 替换当前页的历史记录，带上要传递的state
navigate(0, { replace: true, state: yourTargetState });
// 回退到上一页
navigate(-1);

此时上一页通过useLocation().state就能获取到你设置的状态值，因为当前页的历史记录已被替换为包含目标state的版本，回退时上一页会读取这个更新后的历史条目信息。

方案2：直接跳转至上一页路径并传state

如果你明确知道上一页的路由路径，直接通过路径跳转并传递state，代替navigate(-1)：

// 假设上一页路由为 '/previous'
navigate('/previous', { state: yourTargetState });

这种方式相当于重新触发上一页的路由跳转，你可以根据需求选择是否添加replace: true来覆盖历史栈中的对应记录，避免产生冗余的历史条目。

注意事项 #

• 永远不要试图通过navigate(-1)传递新的state，这违背了浏览器历史栈的工作逻辑——历史条目一旦创建，其state就无法通过回退操作修改。
• 如果是复杂的页面间状态传递场景，也可以考虑使用全局状态管理工具（比如Redux、Zustand）来共享数据，避免依赖路由state的限制。

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