使用 react-router 删除查询字符串而不重新加载页面？

Question

在我的应用程序中，我有一个查询字符串，我想在单击按钮后将其删除。

我得到这样的查询字符串：

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

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

然后当我点击按钮时，我想在不重新加载页面的情况下删除字符串。

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

但是上面的代码没有按预期工作。

Answer 1

您应该可以通过调用 replace 来替换状态。对 push 的调用将向历史记录添加一个新条目，从而打破上一个按钮。替换调用不推送而是替换当前页面。

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

Remove a query string using react-router without reloading page?