React路由页面跳转后保存状态

React路由页面跳转后保存状态

1.将状态储存在 LocalStorage / SessionStorage

在组件即将被销毁的声明周期 componentWillUnmount 中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。

2.路由传值

在 B 组件中通过 history.location.state 就可以拿到 state 值，保存之。返回 A 组件时再次携带 state 达到路由状态保持的效果。

3.全局 store (redux/dva)

毫无疑问，这是最通用的方法。将过滤选项放置到全局的 redux store 中，如果你在项目中使用了 redux 的话。

4.React Context

如果没有使用 redux store，那么 React Context 算是最优雅的方案了。将过滤选项保存到 context 中，context provider 放置在列表页和详情页共同的父组容器上。