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

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

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

了解了大概后，发现了这样的一条评论：

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

这是具体的代码：

 

function AppRouter() {
    return (
        <Router history={history}>
            <AppContainer>
                <CustomHeader />
                <CacheSwitch>
                    {routes.map((route: RouteType, index: number) => {
                        return route.cache ? (
                            <CacheRoute
                                exact={true}
                                path={`/${route.routerPath}`}
                                key={index}
                                component={route.component}
                            />
                        ) : (
                            <Route
                                // strict={true}
                                exact={true}
                                path={`/${route.routerPath}`}
                                key={index}
                                component={route.component}
                            />
                        );
                    })}
                    <Redirect to="/login" />
                </CacheSwitch>
            </AppContainer>
        </Router>
    );
}

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

 

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