In my application I have a query string that I want to remove after a button click.

I get the query string like this:

  import qs from 'query-string'
  // ..

  const { search } = url
  const { id } = qs.parse(search)

Then when I click on the button, I want to remove the string without reloading the page.

  const onClick = () => {
     history.push({})
  }

However the code above doesn't work as expected.

In my application I have a query string that I want to remove after a button click.

I get the query string like this:

  import qs from 'query-string'
  // ..

  const { search } = url
  const { id } = qs.parse(search)

Then when I click on the button, I want to remove the string without reloading the page.

  const onClick = () => {
     history.push({})
  }

However the code above doesn't work as expected.

• javascript
• reactjs
• react-router
• react-router-dom
• react-router-v4

• Did you solved your problem? – Samuel Vaillant Commented Apr 29, 2020 at 14:39

1 Answer 1

You should be able to replace the state with a call to replace. The call to push will add a new entry to the history which break the previous button. The call to replace don't push but replace the current page.

const onClick = () => {
  history.replace(pathWithoutTheQuery)
}