Как добавить пользовательское поведение в кнопку назад браузера?

Question

Я использую сервис визуализации внешних данных и связал его контент с маршрутами. Так, например, "/ Scorecard" будет отображать рапорт Scorecard, который содержится в объекте службы визуализации данных.

Я использую React с реакции-маршрутизатор-дом.

Хитрость заключается в том, что я не изменяю свой компонент React на основе этих маршрутов, поскольку я не хочу повторно создавать экземпляр визуализации данных каждый раз, когда пользователь изменяет страницу. Итак, что изменилось, так это сам маршрут, и я вызываю API для изменения отчета (проверьте код ниже, например)

Я попытался событие window.onbeforeunload без успеха, так как я не меняю страницу. Я не хочу заменять ожидаемое поведение кнопки "Назад", но добавляю дополнительный вызов API для возврата к предыдущему отчету.

onButtonClick = (dashboardName) => {
    if (this.props.currentViz) { //check if external API object is instantiated
        this.props.history.push(dashboardName);     

        this.props.currentViz
            .getWorkbook()
            .activateSheetAsync(dashboardName);
    };
};

В настоящее время я успешно изменяю отчет по навигации, но когда я нажимаю кнопку возврата собственного браузера, меняется только маршрут. Я ожидаю, что моя визуализация данных перейдет к предыдущему отчету.

Есть идеи, чтобы решить это?