在 Next.js 中替换查询中的值

Question

我正在使用 Next js。我使用查询参数创建 url： http://localhost:3000/cars?colors=red&nr=20。当我单击按钮时，是否有可能仅更改 URL 的特定部分，例如：http://localhost:3000/cars?colors=blue&nr=20。所以在这种情况下，我只是将颜色更改为蓝色。 我用过：

  router.replace(
      {
        pathname: '/...',
        query:  {
          color: blue
        },
      },
      undefined,
      {
        shallow: true,
      },
    );

但它不起作用。
如何解决这个问题？

Answer 1

您需要将所有查询添加到您的router.replace query，例如

  router.replace(
  {
    pathname: '/...',
    query:  {
      nr:20,
      color: blue
    },
  },
  undefined,
  {
    shallow: true,
  },
);

为了更简单，你可以这样做

  router.replace(
  {
    pathname: '/...',
    query:  {
      ...router.query, // list all the queries here
      color: blue // override the color property
    },
  },
  undefined,
  {
    shallow: true,
  },
);