在项目中会遇到这样一个场景 上拉了N页的时候点进详情然后再返回列表,列表会重置,这里就需要对页面进行缓存,类似vue的keep-alive。
网上找了很多方案,可能demo是可以的,但是在复杂的场景下会有很多问题,基本上不能实现,经过一上午的折腾总算是弄出来了,采用的方案是 react-router-cache-route@1.8.4
代码如下
import React from "react";
import { HashRouter, Route } from "react-router-dom";
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
import Home from "../views/list/index";
import Detail from "../views/detail/index";
const BasicRoute = () => (
<HashRouter>
<CacheSwitch>
<CacheRoute
exact
path="/"
component={Home}
className="custom-style"
saveScrollPosition={true}
behavior={(cached) =>
cached
? {
style: {
position: "absolute",
zIndex: -9999,
opacity: 0,
visibility: "hidden",
pointerEvents: "none",
left: "-100%",
},
className: "__CacheRoute__wrapper__cached",
}
: {
className: "__CacheRoute__wrapper__uncached",
}
}
/>
<Route exact path="/detail/:id" component={Detail} />
<Route render={() => <div>404 未找到页面</div>} />
</CacheSwitch>
</HashRouter>
);
export default BasicRoute;
这个方法有问题需要注意,上线的时候package.json需要锁定react-router-dom和react-router-cache-route,如果没有做就过段时间就会哭了。例子如下
"react-router-dom": "5.1.2",
"react-router-cache-route": "1.8.4"