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

Question

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

After I search for test (among with type and category), the URL changes to the URL above.

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

Next, I have an onClick with this router.push.

I would like to remove ONLY the search query and keep the type and category queries. How is it possible? The documentation doesn't mention anything about this.

Jan Swart · Accepted Answer · 2022-06-08 19:16:56Z

8

To remove the query param completely from the url:

const { paramToRemove, ...routerQuery } = router.query;
router.replace({
  query: { ...routerQuery },
});

answered Jun 8, 2022 at 19:16

Jan Swart

7,34110 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Decaux Over a year ago

This works like a charm, answer didn't work correctly for me, pay attention that paramToRemove is expected to be an object, you can grab it before like const { nameOfQueryParam } = router.query;

juliomalves · Accepted Answer · 2022-05-12 07:29:35Z

4

You can call router.push with the current query string, but omitting the search parameter.

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

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

Given that you're currently at /?search=test&type=abc&category=xyz, the above will route you to /?type=abc&category=xyz. This will also handle scenarios where the type and category query parameters aren't present.

edited May 12, 2022 at 7:29

answered May 11, 2022 at 20:07

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

2 Comments

David Over a year ago

Sorry, I wasn't completely clear in my question. This might work, but if I want to remove the search query in my app by clicking "clear", then the router.push runs (that you posted) and type + category will still show up as empty IF there is no type or category query in the url yet. Right?

juliomalves Over a year ago

Yes. I've updated my answer to handle cases where the other query params aren't in the URL yet.

JamsDev · Accepted Answer · 2022-08-10 15:05:40Z

2

You can just remove it by deleting the property in router.query

delete router.query.search;
router.push(router);

answered Aug 10, 2022 at 15:05

JamsDev

211 bronze badge

2 Comments

jasie Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Vincent Decaux Over a year ago

This won't remove the query parameter from url, but indeed remove it from router

David · Accepted Answer · 2022-05-10 11:13:29Z

0

let queries = Object.assign({}, router.query);

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

answered May 10, 2022 at 11:13

David

3411 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related