React项目，从详情页返回列表页时，保存数据并返回到原来的位置

移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。

解决方案：使用 react-keeper 完成路由的分配，以及页面组件的缓存

react-keeper 详情参考： https://blog.csdn.net/qq_37942845/article/details/104694966

1、下载相关依赖项

npm install react-keeper -s

2、app.js中相关配置

原来我们app.js中设置路由

import { Component } from 'react';
import { Link } from 'react-router-dom'
import { renderRoutes } from 'react-router-config';
import routes from './Routers/router'

render() {
    return (
      <div className="App">
        <div className="rouer-head">
          <Link to="/">首页</Link>
          <Link to="/about">关于我们</Link>
        </div>
        <div className="router-con">
         {renderRoutes(routes)}
        </div>
      </div>
    )
  };

现在更改为

//注意：注释掉的都是修改原来的路由配置


import { Component } from 'react';
// import { Link } from 'react-router-dom'
// import { renderRoutes } from 'react-router-config';
// import routes from './Routers/router'
import { Route, HashRouter } from 'react-keeper';//这里引入react-keeper中要使用的组件
//导入相关的组件
import About from './Views/About';
import Home from './Views/Home'
import Exhi from './Compoonent/Exhibition'
import Search from './Views/Search.jsx'
import Cardetails from './Views/Cardetails.jsx'
import { connect } from 'react-redux';

 render() {
    return (
      <div className="App">
    
        <HashRouter>
          <div>
            <Route cache  path="/" component={()=><Home/>} />//home为我们要缓存的组件
            <Route path="/about" component={()=><About/>}></Route>
            <Route path="/exhi" component={()=><Exhi/>}></Route>
            <Route path="/search" component={()=><Search/>}></Route>
            <Route path="/cardetails" component={()=><Cardetails/>}></Route>
          </div>
        </HashRouter>
       
      </div>
    )
  };

3、列表页面相关配置

导入需要使用的依赖

import { Control ,CacheLink} from 'react-keeper'

 

使用导入的 CacheLink  包裹我们要点击跳转的模块，CacheLink  具体作用就是可以缓存跳转之前的组件，具体使用场景这里不多做解释了，大家可以查看文章开始的参考网址。

 4、关于点击事件跳转页面

Control.go(`/cardetails`);

 5、详情页面点击返回按钮

当然也需要先引入

 import { Control ,CacheLink} from 'react-keeper'

 6、关于控制台弹出 Warning: Failed prop type: Invalid prop 'component' of type 'objec 警示的解决

在此案例中已解决这个问题，如果大家在开发时出现此问题可参考：

https://blog.csdn.net/andywangwangwang/article/details/101017188