更改 URl 不刷新页面 NEXT.JS

Question

我正在使用NEXT.JS和Redux开发电子商务商店。 因此，在产品列表页面中，我对 select 下拉列表进行了排序， 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

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

从文档

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

您将通过router object（由useRouter或withRouter添加）收到更新的pathname和query ，而不会丢失 state。

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

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

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

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

// 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

您想添加一个不会刷新页面的查询参数，您的 url 将类似于： 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}
);