Reactjs 使用react查询和react路由器dom进行缓存

我正在尝试，想看看它。我有一个页面，上面有一张书单

注意，一些代码显然是为了简洁而遗漏的，只是试图显示重要的部分

const useBooks=options=>{
返回useQuery（['books'，options]，bookApi.fetchBooks（options））；
}
康斯特图书=（）=>{
useffect（（）=>（）=>console.log（“卸载”），[]）；
const[options，setOptions]=useState（{}）；//选项示例：{page:1，搜索：“test”}
const{error，isLoading，data}=useBooks（选项）；
返回books.map（book=>{book.name}；
}

现在，本书是我应用程序中的一个“页面”，使用：

const-App=（）=>{
返回(
)
}

当我在“主页”和“书籍”之间来回走动时（通过点击我应用程序中的导航链接），我每次都会看到书籍进入网络。我也会在控制台中看到“卸载”

我最初将路由包装在a中，并删除了它，但Books组件仍显示为卸载。我希望它不会卸载，也不会看到网络获取，并且书籍将从react查询缓存中提取。我还尝试使useBooks挂钩不使用搜索选项参数，但结果相同

---

在我的场景中，如何使用避免网络抓取？

react router

将在您离开组件时卸载组件，是的。但这是故意的，不是问题所在

当使用react查询钩子的组件挂载时，它将触发一次获取（因为挂载）。但是，如果您的缓存中已经有此特定密钥的数据，您将立即获得作为“过时数据”返回的数据，并且获取将仅在后台进行

如果您想避免请求发出，您可以：

• 将

  refetchOnmount

  设置为

  false

  ，以便在安装组件时不会发生refetch
• 在查询中设置一个

  staleTime

我建议设置

staleTime

：它将告诉react query数据应被视为“新鲜”多长时间。如果将其设置为5分钟，则5分钟内不会进行背景重新蚀刻-数据将始终直接来自缓存。

staleTime

默认为

0

，因此您将始终获得背景重新蚀刻

const useBooks = options => {
  return useQuery(['books', options], bookApi.fetchBooks(options));
}

const Books = () => {
  useEffect(() => () => console.log("unmount"), []);
  const [options, setOptions] = useState({}); // options ex: { page: 1, search: "test"}
  const {error, isLoading, data} = useBooks(options);

  return books.map(book => <div>{book.name}</div>;
}

const App = () => {

  return (
    <Router>
      <>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/books">
          <Books />
         </Route>
      </>
     </Router>
    )
  }