调用history.goBack()是否会保留此前通过push方法存入的state？

结论 #

• 从SignIn组件调用history.goBack()返回上一页面时，不会携带示例中推入的state
• 该state会保留在历史记录中，与它绑定的历史条目共存亡

原理说明 #

你示例中的state是和/signin对应的历史记录条目绑定的，react-router（及底层的history库）的历史栈中每一条记录都是独立的，各自持有专属的pathname、state等属性，不会互相干扰。

history.push({
    pathname: '/signin',
    state: { from: true },
});

场景验证 #

我们以完整跳转链路为例说明：

1. 初始在页面A，此时历史栈中只有「页面A记录」
2. 执行上述history.push代码跳转到SignIn页，历史栈变为 [页面A记录, SignIn记录（绑定state: {from: true}）]
3. 在SignIn页调用history.goBack()，将直接跳转到前一条记录也就是页面A，页面A只会读取自身记录的state，不会携带SignIn记录的state
4. 此时SignIn的记录仍然存在于历史栈中，它的state也会同步保留：如果调用history.goForward()回到SignIn页，依然可以正常读取到location.state.from = true的取值。

只有当SignIn这条历史记录被history.replace等操作覆盖、或者用户手动清除浏览器历史/关闭页面时，该state才会被清除。

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