reactjs - 为什么 React PWA 在离线时根据路由重新获取延迟加载 block

Question

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

serviceWorker.register();

然后创建了 minifist.json 文件。

我确实根据路由延迟加载了一些组件。因此，当我尝试在打开网络选项卡时通过 Reach Router Link 更改 url 来测试浏览器上的离线流程时，导致应用程序重新获取失败的组件 block - 因为离线状态 - 因此导致错误边界触发错误。

提示:我确实在离线之前访问了该页面，因此应该已经提取了 block 。

其次，如何使用 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>
    );

Answer 1

正如所讨论的，问题的发生可能是由于您的一个主要组件中的某些代码逻辑，而与延迟加载根本无关。如果您检查您的控制台，那么您将看到以下错误。此错误导致应用程序失败。

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)

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