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

Question

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

假设我有两个页面：/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应用程序是如何将导航堆栈保存在内存中的，当你弹回上一页时，不一定会再次呈现(。

Answer 1

swr是vercel的最佳选择，可在数据提取和维护提取数据的状态方面获得更好的性能

Answer 2

重新渲染的一种方法是在提交Axios请求时更改状态变量，使组件自动重新渲染。