React Router Dom - Clear url parameters without refreshing the page

Question

I do have some parameters passed by a link to an url, like :

https://mysite/post/list?success

Considering I'm with React JS and using React router dom, how should I do to clean the parameters without refreshing the page, in order to be back button friendly ? I'm aiming for the same page, without params.

Edit : Proposed here, this solution does not work for this case

  const queryParams = new URLSearchParams(location.search)
  queryParams.delete('success')
  history.replace({
    search: queryParams.toString(),
  })

It does work while treating params case to case (by applying "if" chains), but I'm searching for a function clearing them all at once - is there a way to do that with the .delete method ?

Does this answer your question? [How to remove query param with react hooks?](https://stackoverflow.com/questions/62032050/how-to-remove-query-param-with-react-hooks) — GAntoine, Jul 03 '21 at 16:11
Unfortunately not, I'd try to clear the whole params and not a single and defined string, so the .delete() is not doing its work... — Horkos, Jul 03 '21 at 16:22

Horkos · Accepted Answer · 2021-07-03T17:33:33.497

2

Found it !

   const queryParams = ""
   history.replace({
     search: queryParams,
   })

'Twas dead simple and efficient. Closing.

edited Jul 03 '21 at 17:33

answered Jul 03 '21 at 16:51

Horkos

227
2
5
12

React Router Dom - Clear url parameters without refreshing the page

1 Answers1