react-router在电商项目上返回列表页的最佳实践?

我的app是采用web+壳的方式来制作的.web端采用了react + react-router 的框架.现在有个问题是这样的:

电商网站通常会有首页,有专辑页面,有商品列表页面,有商品详情页面,往往首页和商品列表页面都会很长,需要滚动屏幕,这个时候如果进入到商品详情页再返回到商品列表页面,用户其实是希望返回到上次浏览到的位置的.

于是现在问题来了,如果将首页路由('/'), 商品列表页路由'/list/123'和商品详情页路由('/products/123')由于平行的路由发生切换,会让原来的路由unmount,因此如果再返回到上一级路由的时候,由于数据是在组件didMount之后才能够请求到,因此会造成再次请求数据,而且页面的浏览位置也会重新定位到顶部.这就造成了用户体验很不友好.

我之前做过一个工作,将首页路由作为父级路由,将其他路由作为子路由,这样,从首页进入到其他页面,都不会导致首页组件被``unmount``, 实际效果还是不错的.

虽然首页我可以用父子路由的方式来解决,但是还有很多页面也会有同样的切换路由后返回上级路由,上级路由组件重新请求数据的问题,我又总不能都采用父子路由嵌套的方式,那样会让这个项目框架变得好复杂.

那么各位有没有一个成熟的方案来解决这个问题呢.可以给我一个gitbub的demo库,也可以是其他人的文章链接.

另外,是否react-native能够解决这个问题呢,又有什么坑呢?

阅读 2.2k
推荐问题
宣传栏