如何向浏览器后退按钮添加自定义行为？

Question

我正在使用外部数据可视化服务，并且已将其内容与路线相关联。因此，例如'/ scorecard'将显示记分卡raport，它包含在数据可视化服务的对象中。

我在React-router-dom中使用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);
    };
};

当前，我正在成功更改导航报告，但是当我按下本机浏览器后退按钮时，仅更改了路线。我希望我的数据可视化可以转到以前的报告。

有什么办法解决这个问题吗？