时间戳

首页 > 解决方案 > 点击浏览器后退按钮时如何阻止 React 组件在加载时重新获取数据

javascript - 点击浏览器后退按钮时如何阻止 React 组件在加载时重新获取数据

问题描述

我正在使用 Next.js 并Next Link在我的 React 应用程序中处理路由。

假设我有 2 个页面：/product-list?year=2020以及一个将被路由到的详细页面/product-list/details?year=2020&month=4

在pages/product-list.js中，我使用 React 路由器获取year查询参数以进行 API 调用。

const ProductList = (props) => {
  const router = useRouter();
  const year = router.query.year;

  useEffect(() => {
    // Fetch API using year
  }, [year]);

  return (
    // UI
    <Link href="/product-list/details/?year=2020&month=4" />
  );
}

当我通过单击后退按钮从详细页面导航回来时，我可以看到没有呈现整个页面（通过使用开发控制台将页面背景设置为黄色并验证它在返回时没有改变） .

但是，它确实触发了另一个（不必要的）API调用，因为路由器通知我的ProductList组件year变量发生了变化......从技术上讲它确实......

所以问题是：有没有办法只在从另一个页面返回时才year触发变量更改通知？（想想 iOS 应用程序如何将导航堆栈保存在内存中，并且当您弹回上一页时不一定会再次呈现）。

标签： javascriptreactjsroutesnext.js

解决方案

swr 是 vercel 的最佳选择，可提高数据获取性能并维护已获取数据的状态

推荐阅读