why CacheRoute dosn't cache in a Switch? about react-router-cache-route HOT 5 CLOSED

Controlling Rendering Behavior is the key of CacheRoute .

In render method of Switch you can see that there is no any way to do this.

Because Switch would ONLY render matched route.

Treating unmatched route as null means that CacheRoute in Switch would be removed either.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js#L41-L70

PS: 英语不太好，可以中文交流~

from react-router-cache-route.

我在react-router的基础上改写了Switch,修改了CacheRoute,可以接受visible属性,目前可以使用CacheSwitch实现Switch Cache.
`

render() {
const { route } = this.context.router;
const { children } = this.props;
const location = this.props.location || route.location;

children = Array.isArray(children) ? children : [children];
let match;
let index = children.findIndex((c) => {
  const {
    path: pathProp,
    exact,
    strict,
    sensitive,
    from
  } = c.props;
  const path = pathProp || from;
  match = matchPath(
    location.pathname,
    { path, exact, strict, sensitive },
    route.match
  );
  return match;
})

return children.map((c, i) => {
  if (i === index) {
    if (c.type === CacheRoute)
      return React.cloneElement(c, { location, computedMatch: match, key: i, hidden: false })
    return React.cloneElement(c, { location, computedMatch: match })
  }
  else {
    if (c.type === CacheRoute)
      return React.cloneElement(c, { hidden: true, key: i })
    return null;
  }
})

}
另外，CacheComponent如果不能match,子组件就会得到空的match(如果子组件依赖match,有可能出错)，所以我将旧match存储起来，如果CacheComponent不能match,就使用旧match.
另外，目前的问题是，CacheRoute不能接受render.

route-cache.zip

from react-router-cache-route.

适配 Switch 和扩展 CacheRoute 的 render props 确实是可以做的事情

但其实 CacheSwitch 内部没有必要再去决定组件的 hidden 状态，因为 CacheComponent 已经做了这个事情，再做一次判断显得有些多余，也不符合模块职责单一的**

Switch 的问题在于它直接删除了不匹配的组件，我们可以对它简单动刀，让它面对不匹配的 CacheRoute 时仅如实传递 switch match 结果就好，剩下的事情应该由 CacheRoute 独立完成

另外非 matched 状态下使用旧的 match props 我认为不太妥当，可能会造成一些奇怪的问题，我认为我们应该尽可能遵从原汁原味的 react-router，不应对这个过程加以干涉，毕竟 Route children props 作为函数使用的时候，也是有可能出现不匹配状态下 match 为 null 但组件并未销毁，生命周期还在运转的情况，在此状态下造成的后果应由用户自己承担，我们可以在说明中给出提示就够了

我会在近几天尝试加入你需要的功能

from react-router-cache-route.

嗯，谢谢你的回复。CacheSwitch 确实没有必要再去决定组件的 hidden 状态。
另外，CacheComponent保存和使用旧match的问题，因为我们的项目目前已经成型，有很多页面，之前的逻辑是，只有页面match时才会显示，所以页面接收的props.match不可能为null,我们也没有判断match为null的情况。所以为了兼容之前的代码，不得不使用旧的match防止大量error;

from react-router-cache-route.

@tuliprope 更新了如下功能（v1.1.1）

• CacheSwitch
• 非 matched 状态下对应组件不更新，match 值为旧值（其实只是不会更新）
• CacheRoute 的 render、children prop
• CacheRoute 可选缓存时机 [ forward, back, always ]，通过 when 属性控制，默认 forward
• CacheRoute 可以给包裹组件添加类名，通过 className 配置
• 兼容 React 16.3 以下版本（componentWillReceiveProps）

from react-router-cache-route.