使用connected-react-router时如何防止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 屏幕时，它会调用 fetchData api，大约需要 20 秒才能得到响应。

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

我只想调用这个 api 来首次渲染这个 DataPage 屏幕。

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

使用 connected-react-router 中的 push / replace 将挂载新组件。

谢谢。

Answer 1

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