我正在使用NEXT.JS
和Redux
开发电子商务商店。因此,在产品列表页面上,我有一个带有价格从低到高
、价格从高到低
和新品到货
的排序下拉菜单。在选择这个选项时,我想要改变URL而不刷新页面,并且需要发生API调用。我尝试使用下面的代码,但它不起作用,页面正在重新加载。
function sortBy(value) {
router.replace({
pathname: '/products/'+slug,
query: { sort: value }
})
dispatch(fetchproducts(slug, sort));
}
以上代码只是刷新当前页面并将"sort"参数附加到URL中。那么是否有可能像Flipkart一样无需刷新页面来实现呢?
?sort=3
。当前的URL是http://localhost:3000/products/dfhdf/sgsdg?sort=1
。但是页面仍然会重新加载。我已经使用了const router = useRouter()
。 - Jithin Vargheserouter.push
。将第一个参数和第二个参数按原样传递,并提供第三个参数作为带有选项 shallow 为 true 的对象{ shallow: true }
。请记住,它仅在同一页面 URL 更改时起作用。 - subashMahapatradfhdf
部分是动态路由的路由参数。而且页面看起来像是文件系统中的pages/products/[slug].js
。所以你应该使用类似这样的router.push
:router.push('/products/[slug]?sort=1', '/products/dfhdf?sort=1', { shallow: true}
。 - subashMahapatra[...slug].js
。感谢您的回复。 - Jithin Vargheserouter.push('/[...slug]?sort=1', '/level1/level2?sort=1', { shallow: true}
- Yor