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

小能豆

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

javascript

NEXT.JS我正在使用和开发电子商务商店。因此，在产品列表页面中，我有一个带有、和的Redux排序选择下拉菜单。选择此选项后，我想更改 URL 而无需刷新页面并应发生 API 调用。我尝试使用以下代码，但它不起作用并且页面正在重新加载。Price Low to HighPrice High to LowNew Arrivals

function sortBy(value) {
    router.replace({
        pathname: '/products/'+slug,
        query: { sort: value }
    })

    dispatch(fetchproducts(slug, sort));
}

上述代码只是刷新当前页面并将sort参数附加到 URL。

因此，是否有可能像在中那样无需刷新页面即可做到这一点Flipkart。

阅读 53

2024-06-08

共1个答案

小能豆

借助shallow-routingURL 更改，无需重新加载页面即可实现。可以通过将显式选项对象作为第三个参数传递给来启用此功能Router.push，即{ shallow: true }

来自文档

浅路由允许您更改 URL 而无需再次运行数据提取方法，其中包括getServerSideProps、getStaticProps和getInitialProps。

您将通过对象（由或添加）收到更新的内容pathname和，而不会丢失状态。query``router``useRouter``withRouter

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

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

但有一些注意事项：无法shallow-routing在不同的页面之间执行此操作，它仅适用于同一页面的 URL 更改。有关更多详细信息，请参阅注意事项部分。

例如，您可以更新页面 page 的查询参数，但如果您尝试从到/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 })

2024-06-08