关于react-router-cache-route的使用

因为在做项目的过程中,会看一下整个文件的项目目录,文件与文件之间的关联关系,一开始我会从入口文件开始分析,一层一层的去分析整个项目,不过在整个项目中看到router文件,发现自己里面有很多东西不懂,尤其还用到了 react-router-cache-route,于是又去百度搜索对一个的文章,

发现了这篇文章:使用react-router-cache-route实现页面状态的缓存

了解了大概后,发现了这样的一条评论:关于react-router-cache-route的使用_第1张图片

可能我也会有这样的一个疑问,但是当我再次去分析router文件的时候,好像别人已经把这个问题解决了,并且我在以后的开发中也用到了这个方法,现在就感觉自己好庆幸去看了别人写的文章,去看别人提出的问题,

这是具体的代码:

关于react-router-cache-route的使用_第2张图片

 

function AppRouter() {
    return (
        
            
                
                
                    {routes.map((route: RouteType, index: number) => {
                        return route.cache ? (
                            
                        ) : (
                            
                        );
                    })}
                    
                
            
        
    );
}

加了一个判断标志位:cache,只有传递了cache页面才能被缓存,没有传递cache,就用普通路由形式。

关于react-router-cache-route的使用_第3张图片

 

至于为什么需要缓存页面信息,是因为页面与页面之间的参数都是由history传递的,一刷新页面的参数就没有了,所以需要缓存,当然,有时候是把数据存在sessionStorage里面的。

你可能感兴趣的:(javascript,前端,react路由缓存)