Нажатие на кнопку BackButton в Chrome приводит к некорректному поведению после перезагрузки iframe.

Question

Я должен перерисовать iframe, как только пользователь нажмет на кнопку, однако, если щелкнуть по кнопке, это приведет к перезагрузке iframe, первый щелчок будет проигнорирован, поэтому вам, по сути, нужно дважды нажать на кнопку, чтобы она работала.

Вот код:

import React, { Component } from 'react';
import { createBrowserHistory } from 'history';
import qs from 'qs';

const history = createBrowserHistory();
const QUERY_PARAM_DELIMETER = ',';

class App extends Component {
  state = {
    bar: ''
  }

  updateQuery = () => {
    setQueryParam('bar', 'foo');
    this.setState({
      bar: 'foo'
    })
  }

  render() {
    return (
      <div>
        <iframe title="chat" src={"https://www.twitch.tv/embed/beyondthesummit/chat?bar=" + this.state.bar } frameBorder="0" scrolling="no" height="500" width="350"></iframe>
        <button onClick={this.updateQuery}>Add random query param</button>
      </div>
    );
  }
}

export default App;

function setQueryParam(key, val) {
  const queryObj = parseQueryObj();

  if (Array.isArray(val)) {
    /* eslint-disable no-param-reassign */
    val = val.join(QUERY_PARAM_DELIMETER);
    /* eslint-enable no-param-reassign */
  }

  queryObj[key] = val;

  // Delete prop in case the value is empty
  if (queryObj[key] === undefined || queryObj[key] === '' || (Array.isArray(queryObj[key]) && !queryObj[key].length)) {
    delete queryObj[key];
  }

  return pushQueryObj(queryObj);
};

function pushQueryObj(queryObj) {
  const search = qs.stringify(queryObj, { encode: false });

  // We dont want to push to history if there will be no change in the url
  if (history.location.search.split('?').pop() === search) {
    return;
  }

  return history.push({ search });
}

function parseQueryObj() {
  return qs.parse(history.location.search, { ignoreQueryPrefix: true });
}

Это очень простой пример с целью воспроизвести проблему. Как только компонент смонтирован, вы нажимаете кнопку Add random query param, которая изменит URL-адрес и вызовет перезагрузку iframe. Если вы попытаетесь вернуться назад, ожидаемое поведение будет на первой странице, но этого не произойдет. Вместо этого вы должны дважды щелкнуть, чтобы вернуться назад.