react重新进入路由之后，如何让页面中前后的state保持一样

Question

我遇到个问题，用户确认订单时候，会有地址选择，此时点击选择地址，会通过路由跳转到地址选择页面，完成后再返回。这样没问题，但是用户如果是先选优惠券和地址等其他一些信息之后，再去选地址，那么选完地址返回来以后，页面就更新了，所有的优惠券和物流信息又是最原始的状态了，这种情况如何处理？

Answer 1

如 @穗乃果 所说，存到redux里，或者使用其他方式进行持久化；
这里说下“其他方式”：
1、使用webpack构建的项目，可以建一个文件，data.js，将数据保存data.js中，跳转页面后获取；
2、使用localStorage等本地存储的方式（存储方式参考第3种）;
3、使用JSON.stringify对 A 页面需要保存的数据进行序列化，然后带在路由的search中，如：

// 第3种方法
let searchData = {
    name: '..',
    price: '..'
}

let schData = JSON.stringify(searchData)
browserHistory.push(`/.....?schData=${schData}`)

进入新路由后，便可JSON.parse将保存的信息提取，选择完城市后，同理...

没有使用redux、mobx的情况下，最推荐使用第3种方式实现，即时用户刷新了页面，状态也能得到维持，而且实现起来也比较简单；

Answer 2

存到redux里，或者其他方式持久化状态

Answer 3

这里提到了 redux 和其他一些持久化的方案，这些方案做的好一些的话需要考虑何时销毁保存的状态。

如果你用 history API（就是 react-router 的 BrowserHistory）做路由的话，我说一个不同的思路。

History API 的 pushState 函数可以给历史记录关联一个任意的可序列化 state，所以可以在路由 push 的时候将当前的优惠券等一些信息存到 state 中，下次返回到这个页面的时候就能从 state 里面取出离开前的数据重新渲染。react-router 直接可以支持。这个方法适合一些需要临时存储的场景。

Answer 4

自答一个吧，当时刚刚开始用react技术栈写项目，也是第一次自己一个人写项目，所以好多东西都不懂。

• 在进入选择地址页面之前，componentWillUnMount的时候,存储一个sessionStorage即可
• 每次进入页面判断sessionStorage中有没有存储的那个值，有，则读取渲染数据；没有，则说明数据是初始化的状态
• 返回或进入除了选择地址以外的页面，清掉存储的sessionStorage，保证下次进入是初始化的数据