README_CN.md

kashrut

With react-router work, routing component with caching feature, similar Vue in keep-alive function

React v15+

React-Router v4+

Problems encountered

Use Route , the components corresponding to the route can not be cached in forward or reverse, resulting in loss of data and behavior

For example: list page after rolling in the end section, click to jump to the details page, will return after return to top of the list page, scroll position and lost recording data

The reason & Solutions

Route Assembly disposed in the path mismatch is unloaded (the render method return null), also corresponding to the true node tree is deleted from dom

After reading Route the source code we can find children as a method to use to help us to manually control the rendering behavior

Delete hidden alternative to solve the problems encountered

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L42-L63

installation

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

Instructions

May be used CacheRoute components component, render, children attributes loading assembly

Note: Do not write the statement cache Switch component which, because Switch components will uninstall routes in all non-matching state, you need to use CacheSwitchalternative Switch

Use when property decide when to use cache functions, optional values [ forward, back, always], the default value forward

Use className attribute wrapping elements to add custom styles

May also be used behavior attributes to customize the way hidden components cached state, the working mode according to CacheRoute the current state of the cache returns a package assembly acting 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} />} 
      </ kashrut>
      或
      <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

Additional life cycle

Use CacheRoute component will be called cacheLifecycles attribute, which contains two additional life cycle injection function didCache and didRecover, respectively, when the assembly is to be restored and cached

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 (
      // ...
    )
  }
}

Manually clear the cache

Use cacheKey prop and dropByCacheKey functions to manually control buffer

CacheRoute Import, {dropByCacheKey, getCachingKeys} from 'Cache-REACT-Router-route' 

...
 <= cacheKey CacheRoute ... "the MyComponent" />
 ... 

the console.log (getCachingKeys ()) // if `cacheKey` prop as 'MyComponent' already in the cache buffer state routing, the resulting [ 'MyComponent'] 
... 

dropByCacheKey ( 'MyComponent' ) 
...

react-router-cache-router