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

Question

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

这个函数我用来更新我的查询参数。示例URLhttps://qa.portal.tech/feeds?country=USA&page=1&pageSize=10&价格=是

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

Answer 1

随着最新版本的react router dom从v5开始，行为发生了变化。即使在参数或查询更新时，当您直接更改url时，组件也会被重新装载，而不是重新渲染。

然而，使用链接实际上遵循重新渲染模式

这是演示变化的工作演示