功能

此插件可以滿足緩存上一頁的功能旋廷，即：返回上一頁的時候急前，上一頁的滾動條京郑、動作狀態(tài)等等和離開這個頁面時的狀態(tài)保持一致宅广。

簡介

搭配 react-router 工作的、帶緩存功能的路由組件些举，類似于 Vue 中的 keep-alive 功能跟狱。

原理

Route 中配置的組件在路徑不匹配時會被卸載（render 方法中 return null），對應(yīng)的真實(shí)節(jié)點(diǎn)也將從 dom 樹中刪除户魏，利用Route暴露的children方法驶臊，讓我們手動控制渲染。

安裝

注意：作者測試使用時版本為1.4.6

npm install react-router-cache-route --save

注意事項(xiàng)

緩存語句不要寫在 Switch 組件當(dāng)中叼丑，因?yàn)?Switch組件會卸載掉所有非匹配狀態(tài)下的路由资铡，需使用 CacheSwitch 替代 Switch。

使用 when 屬性決定何時使用緩存功能幢码，可選值為 [forward, back, always] 笤休，默認(rèn)值為 forward。

使用 className 屬性給包裹組件添加自定義樣式症副。

也可以使用 behavior 屬性來自定義緩存狀態(tài)下組件的隱藏方式店雅，工作方式是根據(jù) CacheRoute 當(dāng)前的緩存狀態(tài)，返回一個作用于包裹組件的 props贞铣。

代碼示例

路由改寫

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

import List from './components/List'
import Item from './components/Item'

import List2 from './components/List2'
import Item2 from './components/Item2'

const App = () => (
  <Router>
    {/*
      也可使用 render, children prop
      <CacheRoute exact path="/list" render={props => <List {...props} />} />
      或
      <CacheRoute exact path="/list">
        {props => <List {...props} />}
      </CacheRoute>
      或
      <CacheRoute exact path="/list">
        <div>
          支持多個子組件
        </div>
        <List />
      </CacheRoute>
    */}
    <CacheRoute exact path="/list" component={List} when="always" /> 
    <Switch>
      <Route exact path="/item/:id" component={Item} />
    </Switch>

    <CacheSwitch>
      <CacheRoute 
        exact 
        path="/list2" 
        component={List2} 
        className="custom-style"
        behavior={cached => (cached ? {
          style: {
            position: 'absolute',
            zIndex: -9999,
            opacity: 0,
            visibility: 'hidden',
            pointerEvents: 'none'
          },
          className: '__CacheRoute__wrapper__cached'
        } : {
          className: '__CacheRoute__wrapper__uncached'
        })}
      />
      <Route exact path="/item2/:id" component={Item2} />
      <Route
        render={() => (
          <div>404 未找到頁面</div>
        )}
      />
    </CacheSwitch>
  </Router>
)

export default App

額外的生命周期

使用 CacheRoute 的組件將會得到一個名為 cacheLifecycles 的屬性闹啦，里面包含兩個額外生命周期的注入函數(shù) didCache 和 didRecover，分別用在組件 被緩存 和 被恢復(fù) 時

import React, { Component } from 'react'

export default class List extends Component {
  constructor(props, ...args) {
    super(props, ...args)
    props.cacheLifecycles.didCache(this.componentDidCache)
    props.cacheLifecycles.didRecover(this.componentDidRecover)
  }
  
  componentDidCache = () => {
    console.log('List cached')
  }

  componentDidRecover = () => {
    console.log('List recovered')
  }

  render() {
    return (
      // ...
    )
  }
}

github地址