Reactjs 使用react路由器时保存API数据的最佳方法

我的当前React应用程序存在延迟问题。正如目前所写的，我有一个顶级react路由器，它在几个受保护的路由之间路由。像这样：

export default function IndexRouter(): JSX.Element {
  return (
    <Switch>
      <Route path="/routeA" component={ComponentA} />
      <Route path="/routeB" component={ComponentB} />
      <Route path="/routeC" component={ComponentC} />
       ...
    </Switch>
  );
}

导出默认函数IndexRouter（）：JSX.Element{
返回(
...
);
}

组件A从几个API调用加载大量数据，包括多个数据数组和图像。这是通过自定义Axios挂钩完成的。部件A的大致结构如下所示：

export default function ComponentA(): JSX.Element {
  const [data, loading, error, fetch] = useAxios(...);
  return (
    <Sub1 />
    <Sub2 />
  );
}
export default function Sub1(): JSX.Element {
  const [data, loading, error, fetch] = useAxios(...);
  const [data1, loading1, error1, fetch1] = useAxios(...);

  return (
    ... more sub-components
  );
}

导出默认函数ComponentA（）：JSX.Element{
const[data，loading，error，fetch]=useAxios（…）；
返回(
);
}
导出默认函数Sub1（）：JSX.Element{
const[data，loading，error，fetch]=useAxios（…）；
常量[data1，loading1，error1，fetch1]=useAxios（…）；
返回(
…更多子组件
);
}

它是这样嵌套的

因此，当用户使用react路由器导航到组件a时，基本上可以获得大量数据。我的问题是，用户经常离开componentA（主页），但每次都返回componentA。每次，componentA都会加载以前加载的所有数据，用户只需做一些小的更改。这种重复加载会在导航过程中造成大量延迟

我觉得我不能利用useMemo或useCallback，因为在react路由器的导航过程中正在卸载componentA。我不认为在本地存储中持久化数据是一个很好的长期解决方案。我还觉得，将componentA中的所有深层API调用抽象到一个更高阶的组件也不是一个很好的解决方案，而且会导致prop钻取的代码混乱

---

所以我的问题是如何解决这个问题？

将提取的数据保存到redux中，或者在顶部创建CacheContext，并为axios创建拦截器以在响应时保存提取的数据，请尝试在请求中使用cache

我不认为在本地存储中持久化数据是一个很好的长期解决方案

我不认为在这个用例中使用localStorage有什么问题

这也不是一个很好的解决方案，而且会导致支柱钻孔的代码混乱

React提供了一种处理道具钻孔的无痛方法，它是本机语言，内置于语言中，称为。对此有一些警告，因为这需要优化，如果使用不当，可能会导致（但不限于）不必要的重新渲染。状态管理库（如）为您提供了一种方法，通过简单地将您的组件连接到状态树（该状态树可以持久保存在本地存储中）来以一种不那么痛苦的方式处理此问题

另一种处理方法是简单地缓存API的响应，有一些库（stale while revalidate）可以为您简化这一过程

SWR文档中的一个片段：

SWR首先从缓存返回数据（stale），然后发送获取请求（revalidate），最后再次提供最新数据

库中还有一些参数，允许您指定何时重新验证