如何防止在使用连接的react路由器时重新呈现react页面

Question

-MainPage.js
import { push } from 'connected-react-router';
const showDataPage = () => {
dispatch(push(ROUTES.DATA))
}
-DataPage.js
export const DataPage = () => {
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(Actions.fetchData());
}, []);

当我导航到DataPage屏幕时，它将调用fetchDataapi，大约需要20秒才能得到响应。

如果我在20秒内转到另一个页面，而服务器没有完全响应，然后返回DataPage，它将启动另一个fetchData api。

我只想在DataPage屏幕的第一次呈现时调用这个api。

我知道这可以使用useState或useRef来完成，但我想要的是重新使用已经渲染的组件，而不是再次重新安装DataPage。

使用连接的react路由器的推送/替换将安装新组件。

谢谢。

Answer 1

您可以尝试使用库https://github.com/CJY0208/react-activation制作keep-alive路由器这个库将帮助您只呈现一次-第一次访问页面。