我正在使用NEXT.JS和开发电子商务商店Redux。因此，在产品列表页面中，我使用Price Low to High,Price High to Low和对选择下拉列表进行了排序New Arrivals。选择此选项后，我想在不刷新页面的情况下更改 URL，并且应该发生 API 调用。我尝试使用以下代码，但它不起作用并且页面正在重新加载。
function sortBy(value) {
router.replace({
pathname: '/products/'+slug,
query: { sort: value }
})
dispatch(fetchproducts(slug, sort));
}
上面的代码只是刷新当前页面并将sort参数附加到 URL。
那么是否可以像Flipkart.
在shallow-routing不重新加载页面的情况下更改 URL 是可能的。可以通过将显式选项对象作为第三个参数传递给 来启用它Router.push，即{ shallow: true }
从文档
浅路由允许您更改，恕不再次运行数据获取方法的URL，包括
getServerSideProps，getStaticProps，和getInitialProps。您将收到更新的
pathname和queryviarouter对象（由useRouter或添加withRouter），而不会丢失状态。
例如，这将如何在 的帮助下更新sortBy路径名的查询参数。/productsshallow-routing
Router.push({
pathname: '/products',
query: { sortBy: 'price' }
},
undefined, { shallow: true }
)
但是有一些注意事项shallow-routing在不同页面之间是不可能的，它只适用于相同页面的 URL 更改。有关更多详细信息，请参阅警告部分。
例如，您可以更新页面/product页面的查询参数，但如果您尝试执行shallow-routingfrom/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
您想添加一个不会刷新页面的查询参数，您的网址将类似于：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}
);