如何在不重新加载NextJs整个页面的情况下导航到另一个页面? [英] How to navigate to another page without reloading the whole page in NextJs?

问题描述

我注意到在NextJs中，每当我单击<Link>转到另一页时，即使该另一个"页面是同一页面，它也会调用getInitialProps.

I notice that in NextJs, whenever I click on a <Link> to go to another page, it calls the getInitialProps even if that "another" page is the same page.

例如，在/profile页上，有2个组件，其中一个用于用户信息"，另一个用于订单列表".从"/profile"页面的getInitialProps中的API获取用户信息"和订单列表"组件中使用的数据.

For instance, on /profile page, there are 2 components, one for "user information" and the other component for "list of orders" which is paginated. Both data used in "user information" and "list of orders" components are fetched from APIs in getInitialProps of the /profile page.

当我单击以转到/profile页上的订单列表"组件的下一页时，它将转到/profile/p/2.数据已加载并且一切正常，除了/profile/p/2实际上重新加载了整个配置文件页面并重新获取了用户信息"数据，该数据应该保持相同(并且不需要重新获取)因为该页面是/profile页面的一部分.

When I click to go to the next page of the "list of orders" component on /profile page, it goes to /profile/p/2. The data loads and it all works fine, except that /profile/p/2 actually reloads the whole profile page and re-fetches the "user information" data which should have remained the same (and doesn't need to be re-fetched) as long as the page is part of /profile page.

是否有一种方法可以从/profile导航到/profile/p/2，而无需重新加载整个页面，而是仅显示订单列表的组件?

Is there a way to navigate to /profile/p/2 from /profile without reloading the whole page but only the component showing the list of orders?

推荐答案

您可以像这样将浅层传递给Link

You can pass shallow to Link like this

<Link href="...." as="...." shallow=true />

这篇关于如何在不重新加载NextJs整个页面的情况下导航到另一个页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！