使用connected-react-router时如何防止react页面重新呈现

问题描述

-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屏幕时，它将调用fetchData api，该过程大约需要20秒才能得到响应。

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

我只想对此DataPage屏幕的第一个呈现进行此api调用。

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

使用connected-react-router中的推/替换将安装新组件。

谢谢。

解决方法

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