在不刷新页面的情况下更改 URl NEXT.JS [英] Change URl without page refresh NEXT.JS

问题描述

我正在使用 NEXT.JS 和 Redux 开发电子商务商店.因此，在产品列表页面中，我使用 Price Low to High、Price High to Low 和 New Arrivals 对下拉列表进行排序.选择此选项后，我想在不刷新页面的情况下更改 URL，并且应该调用 API.我已经尝试使用下面的代码，但它不工作并且页面正在重新加载.

function sortBy(value) {路由器.替换({路径名:'/products/'+slug,查询:{排序:值}})调度(fetchproducts(蛞蝓，排序))；}

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

那么是否可以像 Flipkart 那样在不刷新页面的情况下做到这一点.

解决方案

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

来自 docs

<块引用>

浅路由允许您更改 URL 而无需再次运行数据获取方法，包括 getServerSideProps、getStaticProps 和 getInitialProps.p>

您将通过 router 对象(由 useRouter 添加或withRouter)，不会丢失状态.

例如，您将如何在 shallow-routing 的帮助下更新路径名 /products 的查询参数 sortBy.p>

Router.push({路径名:'/产品'，查询:{ sortBy:'价格'}},未定义，{浅:真})

但有一些注意事项不能在不同页面之间进行浅路由，它只适用于同一页面的URL更改.有关详细信息，请参阅警告部分.

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

//页面将重新加载，因为页面之间无法进行浅路由Router.push('/product', '/product/some-product?sortBy=price', { shallow: true })

I am developing a ecommerce store using NEXT.JS and Redux. So in product listing page, I have sorting select dropdown with Price Low to High, Price High to Low and New Arrivals. Upon selecting this option, I want to change the URL without page refresh and API call should occure. I have tried using below code, but it is not working and page is reloading.

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

    dispatch(fetchproducts(slug, sort));
}

The above code just refresh the current page and appending sort param to URL.

So is it possible to do it without page refresh like in Flipkart.

解决方案

With the help of shallow-routing change of URL without doing a page reload is possible. It can be enabled by passing explicit option object as third argument to Router.push, i.e { shallow: true }

From the docs

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps.

You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter), without losing state.

For example, this how you would update the query param sortBy for pathname /products with the help of shallow-routing.

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

But there are a few caveats It is not possible to do shallow-routing between different pages, it works only for same page URL changes. See the caveat section for more details.

For example, you can update a query param for page /product page, but it won't be possible if you try to do shallow-routing from /product to /product/[slug] because they are two distinct pages.

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

这篇关于在不刷新页面的情况下更改 URl NEXT.JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！