无需页面刷新即可更改 URl NEXT.JS

Question

我正在使用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.

Answer 1

在shallow-routing不重新加载页面的情况下更改 URL 是可能的。可以通过将显式选项对象作为第三个参数传递给 来启用它Router.push，即{ shallow: true }

从文档

浅路由允许您更改，恕不再次运行数据获取方法的URL，包括getServerSideProps，getStaticProps，和getInitialProps。

您将收到更新的pathname和queryviarouter对象（由useRouter或添加withRouter），而不会丢失状态。

例如，这你会如何更新查询参数sortBy的路径名/products的帮助下shallow-routing。

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

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

例如，您可以更新页面/product页面的查询参数，但如果您尝试执行shallow-routingfrom /productto则不可能，/product/[slug]因为它们是两个不同的页面。

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

Answer 2

示例：您有一个文件夹，如：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}
);