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

来启用它

从docs

浅路由允许您更改URL，而无需再次运行数据提取方法，包括{ shallow: true }，getServerSideProps和getStaticProps。

您将通过getInitialProps对象（由pathname或query添加）收到更新后的router和useRouter，而不会丢失状态。 / p>

例如，使用withRouter来更新路径名sortBy的查询参数/products的方式。

shallow-routing

但是有一些警告：无法在不同页面之间进行Router.push({ pathname: '/products', query: { sortBy: 'price' } }, undefined, { shallow: true } )，它仅适用于相同页面URL更改。有关更多详细信息，请参见caveat section。

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

/product/[slug]

Answer 2

示例：您有一个文件夹，例如：posts / [id] .js，您的网址就像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}
);

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

2 个答案: