React Router中navigate函数异常：一个可用一个失效，无法获取状态

当你用navigate(-1, { state: ... })尝试回退上一页并传递状态时，目标页面拿不到这个state，核心原因是：navigate(-1)是直接回退到浏览器历史栈里已存在的上一条记录，这条记录的state在当初进入时就固定了，回退操作没法修改或追加新的state。而你第一个正常工作的navigate("/some-route", { state: ... })是主动创建新的历史条目，所以state能正常传递。

解决方案 #

要实现回退并传递状态，得主动导航到上一页的路径，不能依赖-1的回退逻辑：

方案1：已知上一页路径的情况 #

直接指定上一页的路径，同时传递state：

() => navigate("/previous-page", { state: { from: location } })

方案2：未知上一页路径的情况 #

可以在进入当前页面时，从跳转来源的state里保存上一页的路径：

1. 在上一页跳转到当前页时，携带自身路径：

// 上一页的跳转逻辑
navigate("/current-page", { state: { prevPath: "/previous-page" } })

2. 当前页回退时，用保存的路径跳转并传递state：

const { state: prevState } = useLocation();
const navigate = useNavigate();

// 当前页的回退逻辑
() => navigate(prevState.prevPath, { state: { from: location } })

额外说明 #

如果只是需要让上一页知道“是从当前页回来的”，也可以在当前页跳转时替换上一页的历史记录（用replace选项），这样回退时state会生效：

// 替换当前页的历史记录为带上state的上一页路径
navigate("/previous-page", { state: { from: location }, replace: true })

内容的提问来源于stack exchange，提问作者Guilherme G Silva