添加cacheKey之后渲染异常

[xiaomengheiheihei]

如果不添加cacheKey可以正常渲染，但是每次切换tab都会增加缓存，性能堪忧。

所以尝试添加了cacheKey

我是在router的包裹组件中添加的keep组件，如下

export function AppliedRoute({ component: C, ...rest }) {
  // TODO:cacheKey={rest.cacheKey}添加后的显示问题
  // eslint-disable-next-line max-len
  return isClient ? <Route {...rest} render={props => <KeepAlive cacheKey={rest.cacheKey}><C {...props} /></KeepAlive>} /> :
    <Route {...rest} render={props => <C {...props} />} />;
}

一共会缓存三个组件

1. 是layout，也就是顶层路由，匹配/*
2. 是路由1，会渲染在tab1中
3. 是路由2，会渲染在tab2中

从key的对应关系来看应该没有问题，

通过查看元素发现，不管我怎么切换cacheKey，dom都会被渲染在最后一个tab里，如图

从组件渲染关系上看应该没问题，也正常缓存了，就是不知道为什么dom都渲染到最后一个tab里了。 路由组件是作为props传入tab组件的

辛苦帮忙看下是否有思路，感谢~