在shallow-routing的帮助下，可以在不重新加载页面的情况下更改URL。可以通过将显式选项对象作为第三个参数传递给Router.push来启用，即{ shallow: true }
从docs
浅路由允许您更改URL，而无需再次运行数据获取方法，包括getServerSideProps、getStaticProps和getInitialProps。
您将通过router对象（由useRouter或withRouter添加）接收更新的pathname和query，而不会丢失状态。
例如，这就是如何在shallow-routing的帮助下更新路径名/products的查询参数sortBy。

Router.push({
  pathname: '/products',
  query: { sortBy: 'price' }
}, 
undefined, { shallow: true }
)

但有一些注意事项不可能在不同页面之间执行shallow-routing，它只适用于相同页面的URL更改。有关更多详细信息，请参阅注意事项部分。

例如，您可以更新页面/product的查询参数，但如果您尝试将shallow-routing从/product更新为/product/[slug]，则无法更新，因为它们是两个不同的页面。

// page will reload because shallow-routing not possible between the pages
Router.push('/product', '/product/some-product?sortBy=price', { shallow: true })

例如：你有一个类似于以下的文件夹：posts/[id].js，你的url就像http://something.com/posts/123
你想添加一个不会刷新页面的查询参数，你的URL将像这样：http://something.com/posts/123?param=ok
你需要做的就是：

const postId = 123;
const param = 'ok';
router.push(
    {
      pathname: `/posts/[id]`,
      query: {
        postId,
        param
      }
    },
    `/posts/${postId}?param=${param}`,
    {shallow: true}
);

这对我很有效。它比useRouter更容易，但选项更少。给了我一个锚链接，这是我所需要的。在NextJS docs中阅读更多
我的[category].js在useEffect hook中有一个fetch调用，路由器获取URL参数，进行调用，并填充数据。

function createSortLink(sortBy) {

    const url = 'https://example.com/products/[category].js';
    url.searchParams.set('sortBy', sortBy);

    return (
        <Link 
          href={url}
          shallow={true}
          >
          {name}
        </Link>
        }
    )
}