react（dva）进入列表页面后返回再次进入组件不更新的原因（react-router-cache-route）

迷南。 2022-12-16 13:20 446阅读 0赞

react-router-cache-route 是路由缓存工具，通常在dva的首页app.js中一起搭配使用

但是需要注意的是，每一个route路由路径在定义的时候，都需要指定是否需要cache，如果使用copy大法，很容易忽略

**这会导致一种后果，即从路由A点击跳转进入路由B，再由路由B点击返回路由A，最后再次点击跳转进入路由B，打印后会发现，路由B对应的组件没有被重新加载，这正是因为route.js中的配置，配置成了cache=true**

import { Router, Route } from 'dva/router'
    import { CacheSwitch, CacheRoute } from 'react-router-cache-route'

return (
          <div className={styles.router} style={routerStyles}>
            <Router history={history}>
              <CacheSwitch>
                { routes.map(routeProps => {
                  if (routeProps.cache) {
                    return <CacheRoute saveScrollPosition cacheKey={routeProps.key} {...routeProps} />
                  } else {
                    return <Route {...routeProps} key={routeProps.key} />
                  }
                })}
              </CacheSwitch>
            </Router>
          </div>
        )

###  route.js ###

import Home from './pages/home'
    import LIST_Detail from './pages/home/ListDetail'
    import PersonInfo from './pages/home/PersonInfo'
    import PartyOrgList from './pages/home/PartyOrgList'
    import PartyPart from './pages/home/PartyPart'
    
    // 路由配置表
    
    export default [
      { 
        key: 'HOME',
        path: '/',
        cache: true,
        exact: true,
        component: Home
      },
      { 
        key: 'LIST_Detail',
        path: '/list',
        cache: true,
        component: LIST_Detail
      },
      { 
        key: 'PersonInfo',
        path: '/personinfo',
        cache: true,
        component: PersonInfo
      },
      { 
        key: 'PartyOrgList',
        path: '/PartyOrgList',
        cache: false,
        component: PartyOrgList
      },
      { 
        key: 'PartyPart',
        path: '/PartyPart',
        cache: false,
        component: PartyPart
      },
    ]

### 下面是一些[CacheRoute][]的介绍，引用自其它博主 ###

### 文章目录 ###

*  [CacheRoute][]
 *  [遇到的问题][Link 1]
 *  [原因 & 解决方案][Link 2]
 *  [安装][Link 3]
 *  [使用方法][Link 4]
 *  [额外的生命周期][Link 5]

# CacheRoute #

[github地址][github]  
搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能

注意：目前只在 路由前进时 进行缓存

React v16.3+ （兼容了 React v16.3 以下版本）

React-Router v4+

# 遇到的问题 #

使用 Route 时，路由对应的组件在前进或后退无法被缓存，导致了 数据和行为的丢失

例如：列表页滚动到底部后，点击跳转到详情页，返回后会回到列表页顶部，丢失了滚动位置和数据的记录

# 原因 & 解决方案 #

Route 中配置的组件在路径不匹配时会被卸载（`render 方法中 return null`），对应的真实节点也将从 dom 树中删除

在阅读了 Route 的源码后我们发现可以将 children 当作方法来使用，以帮助我们手动控制渲染的行为

[隐藏替代删除 可以解决遇到的问题][Link 6]

# 安装 #

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

*  1

# 使用方法 #

可以使用 `CacheRoute` 组件的 `component`， `render`， `children` 属性装载组件，或者

配合 Route 组件的 children 属性使用 cacheComponent 方法

注意：缓存语句不要写在 `Switch` 组件当中，因为 `Switch` 组件会卸载掉所有非匹配状态下的路由，需使用 `CacheSwitch` 替代 `Switch`

使用 `when` 属性决定何时使用缓存功能，可选值为 \[`forward, back, always`\] ，默认值为 forward

使用 `className` 属性给包裹组件添加自定义样式

也可以使用 `behavior` 属性来自定义缓存状态下组件的隐藏方式，工作方式是根据 `CacheRoute` 当前的缓存状态，返回一个作用于包裹组件的 `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` 的属性，里面包含两个额外生命周期的注入函数 `didCache` 和 `didRecover`，分别用在组件 `被缓存` 和 `被恢复` 时

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

[CacheRoute]: https://blog.csdn.net/achenyuan/article/details/82839024#CacheRoute_1
[Link 1]: https://blog.csdn.net/achenyuan/article/details/82839024#_11
[Link 2]: https://blog.csdn.net/achenyuan/article/details/82839024#___16
[Link 3]: https://blog.csdn.net/achenyuan/article/details/82839024#_23
[Link 4]: https://blog.csdn.net/achenyuan/article/details/82839024#_29
[Link 5]: https://blog.csdn.net/achenyuan/article/details/82839024#_107
[github]: https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.md
[Link 6]: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L118-L127