缓存失效的bug

[HuangQiii]

开发过程中遇到一个二级菜单不缓存的问题，解决了很久才解决，很容易找错方向，记录下来给以防后面的人遇到时无从下手。

function createRoute(path, component, moduleCode) {
  const Cmp = asyncRouter(
    component,
    null,
    null,
    moduleCode,
  );
  return <CacheRoute path={path} component={Cmp} />;
}

const Home = asyncRouter(
  () => import('../{{ source }}/containers/components/home'),
  null,
);

export default class AutoRouter extends Component {
  render() {
    return (
      <CacheSwitch>
        <CacheRoute exact path="/" component={Home} />
        {'{{ routes }}'}
        <CacheRoute exact path="/iframe/:name" cacheKey="iframe" component={IFRAMEINDEX} /> 
        <CacheRoute path="*" component={nomatch} />
      </CacheSwitch>
    );
  }
}

asyncRouoter是按需加载组件，类似react的Lazy

因为路由是动态生成的，所以使用了nunjucks模板。编译后替换{{ routes }}

当时发现，直接写在AutoRouter中的路由可以缓存，而routes中的不能缓存，所以觉得是二级路由的缓存匹配可能有问题。

调试了很多，无果，起了个新项目写了个demo，发现多级路由也是可以缓存的，那就把二级的目录直接写到AutoRouter中，发现可以缓存。

所以问题就在creteRoute方法上！

再进一步探索发现createRoute会返回新的component。所以加入缓存解决这个问题。

const routes = {};

function createRoute(path, component, moduleCode) {
  if (!routes[path]) {
    const Cmp = asyncRouter(
      component,
      null,
      null,
      moduleCode,
    );
    routes[path] = <CacheRoute path={path} component={Cmp} />;
  }
  return routes[path];
}

所以大家遇到不缓存的情况，确认没写错的情况下，可以去看看是不是返回了不同的component

[martinolazzeri]

Hi! I am working with ReactCSSTransitionGroup and when switching between views it doesn't keep the state, this could be a bug related to this issue?

[CJY0208]

@martinolazzeri Meaning CacheRoute doesn't work with TransitionGroup? It could be related to #30

TransitionGroup work well while component being mounted or unmounted

CacheRoute prevent mounted components from unmounting, hiding instead

Which causing TransitionGroup doesn't work when CacheRoute seems like being 'unmounted'.

I tend to think that this is not a bug but an unimplemented feature.

I am going to working on it.

[martinlazzeri]

ok, I will wait for the update! thanks!

[MissLlq]

@CJY0208 大神，你大概什么时候有时间完善这个功能呢？我目前的项目用这两个组件也遇到了同样的问题

[CJY0208]

@MissLlq 是动画支持的问题吗？如果是可以移步 #30 中讨论

很遗憾地说...目前我自个儿的业务比较忙，可能近期还没时间处理这个功能