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

本文链接：https://blog.csdn.net/weixin_57156917/article/details/120255896

在React移动端开发中，通过引入react-keeper库，解决了从详情页返回列表页时刷新数据的问题，实现了页面组件的缓存。详细步骤包括：安装依赖、App.js配置、列表页组件包裹、点击事件处理和警告修复。参考链接提供了更多实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。
解决方案：使用 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