React.js，在微信里内嵌 React 写的 H5，新闻列表点击详情进入查看，当返回时要求页面不会重新加载且还在离开时的滚动位置，如何实现？

[shuangshuangda]

在微信里内嵌 React 写的 H5，比如新闻列表点击详情进入查看，当要返回时要求页面不会重新加载且还在离开时的滚动位置。

[cctv1005s927]

我估计你悬赏解决，就有人给你解决了。

[shuangshuangda]

@cctv1005s927 怎么悬赏啊？

[ChefIsAwesome]

1.跟微信 react 都没关系。
2.离开的时候你缓存下数据和滚动位置不就完了。

[ming61177]

有好几个解决方法吧，比如，详情页面不要跳转路由，弹个全屏框，不销毁列表页的生命周期，

[shuangshuangda]

@ChefIsAwesome 嗯嗯，除了 localstorage 实现还能如何实现呢？我本来是用额外增加一个根节点，通过点击后渲染另外一个根节点来遮罩住原本的 root 根节点，现在在搜索模块复用的时候，会出现问题。所以想来求教下网上有经验的大佬们，平时要实现这样子的功能都是以哪种方法实现的？

[ming61177]

如果用 router 在列表 WillUnmount 去缓存数据，然后详情页返回时，列表页可以知道时 PUSH 或者时 POP，如果是 POP 的时候，拿缓存数据跟滚动的位置去展示，但是这样列表页貌似页面会弹一下。。。因为有个滚动的动作，我目前就是用这种方法。。。。不知道大家有什么比较好的解决方法

[shuangshuangda]

@ming61177 嗯嗯，我就是这样的用遮罩的形式处理的。但是，新闻不是都有搜索功能吗，我通过搜索出来的列表复用了新闻列表的组件，在搜索结果里点击进入后再点击返回按钮，结果返回到了新闻列表中，而不是返回到搜索结果列表。我现在的思路是再增加一个根节点，通过参数传递，判断是在新闻列表中点击进入详情的还是搜索列表中点击进入详情的，但感觉好像有点问题。我看网上有用 router 里的 onleave 和 onenter 实现，大佬你平时这样的是如何实现的呢？

[whosesmile]

1. 不要用 localStorage，缓存数据为什么不用 redux 之类的？
2. 不要用遮罩的策略，不稳定维护难，还是用 react-router 做路由处理吧
3. 常规思路还是离开时缓存数据和滚动位置，恢复时从 redux 读取回来，楼上有人说闪烁问题肯定可以解决的，因为 vue-router 实现了没看到闪烁，google 查查资料吧

[ming61177]

@whosesmile 目前貌似只有用 scrollTo 查不到有好的解决方法