[WIP] try keep alive

[xiaohuoni]

这是一个演示，有些问题需要讨论。
方案来自facebook/react#12039 (comment)
实现使用的是react-live-route
先看效果

再看问题
这个功能没办法通过plugin实现，因为路由部分文件的编辑，没有暴露接口。
由于Switch只会显示一个。所以我这里去掉了Switch，会导致所有的页面下面都会加载404页面，所以给404页面加了一个默认路径/umi404,基本上就是临时的去掉了404功能了。

[xiaohuoni]

@fi3ework @sorrycc cc

[sorrycc]

不用 <Switch> 不是所有都是 keepAlive 了？

[fi3ework]

目前没做支持 liveRoute 的 Switch，我可以趁周末加一下，就和正常的 rr 用法一样了。

现在也有另外一种方法来 hack 掉这个问题：

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/item/:id" component={Detail} />
        <Route path="/about" component={About} />
        <Route path="/items" /> // 占位
        <Route path="*" render={NotFound} />
      </Switch>
      <LiveRoute
        path="/items"
        component={List}
        livePath="/item/:id"
        name="items"
        onHide={routeState => {
          console.log("[on hide]");
          console.log(routeState);
        }}
        onReappear={routeState => {
          console.log("[on reappear]");
          console.log(routeState);
        }}
      />
      <Bar />
    </div>
  );
}

就是将 LiveRoute 放在 Switch 的外面，然后在 Switch 里面放一个匹配的「占位符」，这样的好处是 Switch 不用改，但是增加了用户侧的成本。感觉最好还是改 Switch。

[Nokecy]

这个功能好，希望可以做支持~~~

[fi3ework]

update:
目前 keep-alive 主要还存在以下问题：

• 与 react-loadable 配合时的异步加载问题，因为是异步加载，所以 react-live-route 尝试在 Route mount 时同步拿 DOM 拿不到。上周修了一下，目前的解决办法是向 Route 包含的组件传递一个 ensureDidMount 的函数，让路由的组件在 componentDidMount 周期中调用来拿到真正的 DOM，代价就是多个 API。或者有更好的解决思路可以提供一下吗？
• 我可以找时间新提个 PR，工作量应该不会很大。

[xiaohuoni]

@fi3ework try it!👍

[CJY0208]

react-router-cache-route 原理与 react-live-route 基本一致，拓展了原本的 Switch 为 CacheSwitch ，可兼容 Switch 内写法

使用 CacheRoute 替换 Route

使用 CacheSwitch 替换 Switch

import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

import List from './views/List'
import Item from './views/Item'

const App = () => (
  <Router>
    <CacheSwitch>
      <CacheRoute exact path="/list" component={List} />
      <Route exact path="/item/:id" component={Item} />
      <Route render={() => <div>404 Not Found</div>} />
    </CacheSwitch>
  </Router>
)

export default App

[lijiangwei]

@fi3ework try it!👍

这个功能在现在的版本中如何使用

[hzcdt]

react-router-cache-route 原理与 react-live-route 基本一致，拓展了原本的 Switch 为 CacheSwitch ，可兼容 Switch 内写法

使用 CacheRoute 替换 Route

使用 CacheSwitch 替换 Switch

import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

import List from './views/List'
import Item from './views/Item'

const App = () => (
  <Router>
    <CacheSwitch>
      <CacheRoute exact path="/list" component={List} />
      <Route exact path="/item/:id" component={Item} />
      <Route render={() => <div>404 Not Found</div>} />
    </CacheSwitch>
  </Router>
)

export default App

我在dva-cli搭建的框架里使用了你这个缓存路由，那套框架里毕竟可以自己导入react-router和react-router-cache-route去选择使用哪个，但是umi该怎么做，不管是约定还是配置的路由，生成真正路由文件的过程好像不是我们可以控制的