如何从 Next.js 中的 URL 中删除一个特定的查询参数？

Question

http://localhost:3000/?search=test&type=abc&category=xyz

在我搜索测试（类型和类别）后，URL 变为上面的 URL。

return router.push(
      {
         pathname: `/`,
         query: {
             // something to do here...
         },
      },
      "",
      { scroll: false }
);

接下来，我有一个 onClick 这个 router.push。

我想删除仅搜索查询并保留类型和类别查询。这怎么可能？文档没有提及任何相关内容。

Answer 1

让查询 = Object.assign({}, router.query);

delete queries.search;
return router.push(
      {
         pathname: `/`,
         query: queries
      },
      "",
      { scroll: false }
);

Answer 2

您可以使用当前查询字符串调用 router.push，但省略 search 参数。

const params = new URLSearchParams(router.query);
params.delete('search');
const queryString = params.toString();
const path = `/${queryString ? `?${queryString}` : ''}`;

router.push(path, '', { scroll: false });

鉴于您目前在 /?search=test&type=abc&category=xyz，以上内容会将您转到 /?type=abc&category=xyz。这也将处理 type 和 category 查询参数不存在的情况。

如何从 Next.js 中的 URL 中删除一个特定的查询参数？

How to remove one specific query parameter from URL in Next.js?

javascript

reactjs

next.js