我正在尝试使用 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>
);
最佳答案
正如所讨论的,问题的发生可能是由于您的一个主要组件中的某些代码逻辑,而与延迟加载根本无关。 如果您检查您的控制台,那么您将看到以下错误。此错误导致应用程序失败。
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)
解决此问题后,您的应用程序将按预期运行。
关于reactjs - 为什么 React PWA 在离线时根据路由重新获取延迟加载 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64755301/