CJY0208 / react-router-cache-route

Route with cache for react-router V5 like <keep-alive /> in Vue
https://www.npmjs.com/package/react-router-cache-route
MIT License
1.15k stars 111 forks source link

大佬,有个问题,关于数据缓存,当点击详情页面,url带id的,不做缓存的处理,正常列表页面做缓存的处理,如何实现 #86

Closed 1101916341 closed 4 years ago

1101916341 commented 4 years ago

if (url === ':id') { return <Route exact render={props => onEnter(route.component, props)} key={route.path} path={route.path} /> } else { return ( <CacheRoute when="forward" exact cacheKey={route.path} render={props => onEnter(route.component, props)} key={route.path} path={route.path} /> ) } 如果带 id 的不做缓存,不带的做缓存,但是这样的话,在详情页面和详情页面之间切换,还是会保留最后一次请求的数据,会进行数据的缓存,但是我想要的效果是不做缓存的处理,您看您有什么好的建议吗?

CJY0208 commented 4 years ago

是说带了 id 的路由依然会进行缓存吗?没看太明白

1101916341 commented 4 years ago

详情页面需要带上Id进行数据的请求,并且对页面进行渲染,但是我的详情页面不想做数据的缓存,有办法区分吗?列表页面做数据的缓存,但是详情页面不做数据的缓存

CJY0208 commented 4 years ago

可以的,详情页的路由不要使用 CacheRoute 就行,你的 if else 方法应该可以实现,如果有问题的话,需要检查以下渲染出来的路由配置是否正确

1101916341 commented 4 years ago

大佬,我按您的说的做过了,在详情和详情之间进行切换的话,数据是不会刷新的,没有重新走生命周期函数 if (url === ':id') { // 这里判断是否带 :id ,如果带,就是详情页面,走下面 return <Route exact render={props => onEnter(route.component, props)} key={route.path} path={route.path} /> } else { return ( <CacheRoute when="forward" exact cacheKey={route.path} render={props => onEnter(route.component, props)} key={route.path} path={route.path} /> ) }

CJY0208 commented 4 years ago

嗯嗯,可能需要检查一下渲染出来的路由配置结构,是不是详情页没有使用 CacheRoute

1101916341 commented 4 years ago

1597650248(1) 在详情页和详情页面之间切换的时候,elements中div没有发生任何变化,显示隐藏的操作都没有,本质上就是和没有操作过一样

1101916341 commented 4 years ago

点击之后,没有任何变化,和没有操作过一样

------------------ 原始邮件 ------------------ 发件人: "CJY"<notifications@github.com>; 发送时间: 2020年8月17日(星期一) 下午3:39 收件人: "CJY0208/react-router-cache-route"<react-router-cache-route@noreply.github.com>; 抄送: "1101916341"<1101916341@qq.com>; "Author"<author@noreply.github.com>; 主题: Re: [CJY0208/react-router-cache-route] 大佬,有个问题,关于数据缓存,当点击详情页面,url带id的,不做缓存的处理,正常列表页面做缓存的处理,如何实现 (#86)

嗯嗯,可能需要检查一下渲染出来的路由配置结构,是不是详情页没有使用 CacheRoute

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

1101916341 commented 4 years ago

大佬,我没有说出您想要的点吗?可以给点提示吗?

1101916341 commented 4 years ago

大佬,multiple这个属性调用之后,没有效果啊,缓存出来的还是route中的/:id,没有实现允许按动态路由参数区分不同缓存,您看能否出一个详细的案例啊

1597657359(1) 微信截图_20200817174301

CJY0208 commented 4 years ago

抱歉,工作上比较忙...你能做一个简单的 demo 来复现问题吗?可以尝试新起一个项目,把问题的最小场景复现出来

1101916341 commented 4 years ago

大佬,起一个项目来复现比较麻烦,我们这边的接口都是局域网的,造数据时间较长,您能否简单说一下 multiple 的使用方法啊,拜托了,我看官网没有详细的使用说明,只有一个简单的介绍,直接使用的话,没有效果,能否简单的举一个例子呀,麻烦您了

1101916341 commented 4 years ago

大佬,这是用到react-router-cache-route的两个文件,您看下代码方面有什么问题吗

------------------ 原始邮件 ------------------ 发件人: "CJY0208/react-router-cache-route" <notifications@github.com>; 发送时间: 2020年8月17日(星期一) 下午5:53 收件人: "CJY0208/react-router-cache-route"<react-router-cache-route@noreply.github.com>; 抄送: "1101916341"<1101916341@qq.com>;"Author"<author@noreply.github.com>; 主题: Re: [CJY0208/react-router-cache-route] 大佬,有个问题,关于数据缓存,当点击详情页面,url带id的,不做缓存的处理,正常列表页面做缓存的处理,如何实现 (#86)

抱歉,工作上比较忙...你能做一个简单的 demo 来复现问题吗?可以尝试新起一个项目,把问题的最小场景复现出来

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

1101916341 commented 4 years ago

大佬,问题已解决