在已缓存的界面中、先调用dropByCacheKey手动清除缓存、在重新加载该页面缓存还是存在

[Myhappyboy]

作者你好：在多个页面已经缓存的情况下、需要做一个刷新页面功能。我尝试了调用dropByCacheKey方法、手动清除缓存的页面，然后在重新路由跳转到这个页面，结果是缓存还存在应该怎么处理？

[CJY0208]

是先离开目标路由，清空缓存后再回来，还是直接在目标路由上清空缓存呢？

[Myhappyboy]

是直接在目标路由上清除缓存

[CJY0208]

按照目前的实现，这样是没法用 dropByCacheKey 清掉的，因为地址始终匹配当前路由，dropByCacheKey 将在内部工作中无效

目前如果要实现你的刷新功能，可以尝试变更组件 key 值强制触发组件重新渲染实现

猜测原始的配置大概如下

function RealContent() {
  return (
    ...
  )
}

<CacheRoute ... component={RealContent} />

尝试变更为如下

function RealContent() {
  return (
    ...
  )
}

function Wrapper(props) {
  const [renderKey, setRenderKey] = useState(Math.random())

  const refresh = () => {
    setRenderKey(Math.random()) // 变更 key 触发 RealContent 重渲染
  }

  return (
    <RealContent
      key={renderKey}  
      {...props} 
      refresh={refresh}
    />
  )
}

<CacheRoute ... component={Wrapper} />

如此，RealContent 内部如果需要刷新页面，可调用 props.refresh() 实现

后续考虑将此功能加入 dropByCacheKey 中，将可以在目标路由上直接清除缓存

[Myhappyboy]

好的！感谢提供的思路。

[Ray-56]

@Myhappyboy
我现在的思路是这样的创建一个 RedirectPage：

import React, { useEffect } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { LocationDescriptorObject } from 'history';
import { dropByCacheKey, getCachingComponents, getCachingKeys } from 'react-router-cache-route';

interface LocatioStateProps extends LocationDescriptorObject {}

interface RedirectProps extends RouteComponentProps<any, any, LocatioStateProps> {}

const Redirect: React.FC<RedirectProps> = (props) => {
    useEffect(() => {
        const cachingKeys = getCachingKeys();
        dropByCacheKey('Item');
        const cachingComponents = getCachingComponents();
        setTimeout(() => {
            props.history.replace(props.location.state);
        }, 0) 
    }, []);
    return null;
};

export default Redirect;

也符合作者现有的概念，带参进进入新页面，来进行重定向，先删除，然后跳转

[LiuL0703]

请问 先离开目标路由，调用dropByCacheKey清空缓存后再打开 缓存还在怎么处理 @CJY0208

[CJY0208]

请问 先离开目标路由，调用dropByCacheKey清空缓存后再打开 缓存还在怎么处理 @CJY0208

不重新打开目标路由，用 devtools 看到是清空成功了吗？可能是清空不成功

[LiuL0703]

确实是清空不成功 但是debug进去是走了run(component,reset) @CJY0208

发现是在当前路由下清空不成功 非当前路由下可以清空

嵌套路由不管是在当前路由下还是非当前路由下都无法清空

[CJY0208]

嵌套路由的话，一般是父路由优先缓存，然后冻结了其内部状态，所以子路由（目标路由）实际没有缓存，这是个问题，目前尚未解决，最早在 #46 提出

[CJY0208]

v1.10.0 中新增了 refreshByCacheKey 功能，可实现在已缓存状态下刷新缓存的功能

import CacheRoute, { refreshByCacheKey } from 'react-router-cache-route'

<CacheRoute ... cacheKey="MyComponent" />

refreshByCacheKey('MyComponent') // to refresh

感谢 @xwinstone