keep-live for react

react 中 实现类似 vue中 keep-live的效果

网上案列多达4-5种 这里列下用到的3种

1. 手动按照需求                        （粗暴 直接）
2. 使用插件 react-activation           （ 在原有路由添加）
3. 使用插件 react-router-cache-route （改动原本路由渲染标签）

手动设置

设置缓存或者全局状态管理 ， 然后在生命周期里就进行数据恢复  （简单 粗暴 每个人可以按照自己的逻辑去写）

插件1 react-activation

// 使用 keep-live 缓存  方案之 react-activation
import React from 'react';
import { HashRouter, Route, Switch, Link } from 'react-router-dom';
import Routers from "../../router"
import KeepAlive, { AliveScope } from 'react-activation'
const App = () => (
  <HashRouter>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/Demo">Demo</Link>
      </li>
      <li>
        <Link to="/User">User</Link>
      </li>
    </ul>

    <Switch>
      <AliveScope>
        {Routers.map((item, index) => {
          return <Route key={index} path={item.path} exact render={props => {
            console.log(item)
            return <KeepAlive><item.component cache {...props} /></KeepAlive>
          }} />

        })
        }
        {/* // 所有错误路由跳转页面 */}
        {/* <Route component={NotFound} /> */}
      </AliveScope>
    </Switch>
  </HashRouter >
);


export default App;

插件1  react-router-cache-route

// 使用 keep-live 缓存  方案之 react-router-cache-route
import React from 'react';
import Routers from "../../router"
import { HashRouter as Router, Link } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'
const App = () => (
  <Router>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/Demo">Demo</Link>
      </li>
      <li>
        <Link to="/User">User</Link>
      </li>
    </ul>

    <CacheSwitch>
      {Routers.map((item, index) => {
        return <CacheRoute key={index} path={item.path} exact render={props => {
          console.log(item)
          return <item.component cache {...props} />
        }} />

      })
      }
      {/* // 所有错误路由跳转页面 */}
      {/* <CacheRoute component={NotFound} /> */}
    </CacheSwitch>
  </Router >
);


export default App;