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