使用 wondow.history.pushState 时维护后退按钮

问：

我正在使用一个位于 iframe 中的应用程序。我同时控制 iframe 应用和父应用。

在 iFrame 应用程序的一个页面中，用户可以从下拉列表中选择过滤器。发生这种情况时，我正在尝试在不刷新页面的情况下更新父 url 中的查询参数。为此，我使用以下函数：

const setIframeQueryParams = (activeFilters: SearchFilters) => {
    const filterSearchParams = new URLSearchParams(
      activeFilters as Record<string, string>,
    );
    window.parentIFrame.sendMessage(filterSearchParams.toString());
  };

然后在父端，当收到消息时，它由以下人员处理：

const onIframeURLChange = (data: iframePostMessage) => {
    const params = new URLSearchParams(data.message);
    const {origin} = window.location;
    let urlString = `${origin}${props.basePath}`;
    if (!!params.toString())
      urlString = urlString.concat(`?${params.toString()}`);

    window.history.pushState(null, "", urlString);
  };

这似乎在设置查询参数时工作正常。但是这样做会严重扰乱历史记录，因此按下后退按钮不会将用户带到上一页。有没有办法做到这一点，以便后退按钮仍然将用户带到上一页？