为什么离线时React PWA根据路由重新获取惰性负载块

问题描述

我正在尝试使用CRA和SWR进行PWA以获取数据，所以我做了

serviceWorker.register();

然后创建了minifist.json文件。

，并且我确实根据路由延迟加载了一些组件。 因此，当我尝试通过打开“网络”标签时通过“到达路由器链接”更改网址来测试浏览器上的脱机流时，导致应用重新获取失败的组件块-cuz脱机状态-因此导致“错误边界”触发错误。

提示：在脱机之前，我确实访问过该页面，因此应该已经获取了该块。

其次，如何添加带有CRA和PWA的自定义脱机页面？

更新： 这是处理错误情况的代码。

export const dev = axios.create({ ...config.dev });
// useSWR fetcher function.
export const fetcher = (url: string) =>
  dev
    .get(url)
    .then((res) => res.data.data)
    .catch(
      (err) => err?.response?.data?.message || err.message || err?.data?.message
    );

axiosRetry(dev,{
  retries: 3,retryDelay: (retryCount) => {
    return retryCount * 1500;
  },});

我确实在顶层全局添加了fetcher函数

   <SWRConfig
        value={{
          fetcher,}}
      >
    ...
  </SWRConfig>

以及在使用useSWR的组件中，

 const { data: actions,error }: any = useSWR(url);

  if (error)
    return (
      <h3 className="title">
        Opps,{error} please try again later
      </h3>
    );

解决方法

如前所述，问题可能是由于您的主要组件之一中的某些代码逻辑引起的，而与延迟加载根本无关。 如果您检查控制台，则会看到以下错误。此错误导致应用程序失败。

TypeError: b.map is not a function
    at Auth App Page.180ff7f0.chunk.js?__WB_REVISION__=cdce21b6ef032b90bc09:1
    at Ko (react-dom.production.min.js:153)
    at Ma (react-dom.production.min.js:175)
    at ms (react-dom.production.min.js:263)
    at cu (react-dom.production.min.js:246)
    at su (react-dom.production.min.js:246)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at scheduler.production.min.js:19
    at Hi (react-dom.production.min.js:122)

解决此问题后，您的应用程序将按预期运行。