更改 URL 中的查询参数后，页面再次重新安装答案

【问题标题】：After changing the query params in URL the page is remounting again更改 URL 中的查询参数后，页面再次重新安装
【发布时间】：2020-05-07 08:34:36
【问题描述】：

我在页面上有一些过滤器，应用后我想将这些过滤器值存储在带有查询参数的 URL 中。但是每当我更改参数时，它会再次重新安装页面并导致componentDidMount 再次调用。我想在道具发生变化时收到getDerivedStateFromProps:static 的通知。

我用这个函数来更新我的查询参数。示例网址https://qa.portal.tech/feeds?country=USA&page=1&pageSize=10&price=yes

export const updateQueryString = (history: History, queryParams: any) => {
  const {
    replace,
    location: { pathname }
  } = history;

  replace({
    pathname,
    search: queryString.stringify({
      ...queryParams
    })
  });
};

【问题讨论】：

你可以使用history.push来更新而不是替换
我也试过了，但要重新安装 happing

标签： reactjs react-router

【解决方案1】：

使用 v5 的最新版本的 react-router-dom，行为发生了变化。即使在参数或查询更新时，当您直接更改 url 时，组件也会重新安装而不是重新呈现。

但是使用链接实际上遵循重新渲染模式

这里是working demo 演示更改

【讨论】：