javascript – 拦截/处理React-router中的浏览器后退按钮？

我正在使用Material-ui的Tabs,它们受到控制,我将它们用于(React-router)链接,如下所示：

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
    <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
  <Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

如果我当前正在访问仪表板/数据,我点击浏览器的后退按钮
我(例如)转到仪表板/用户,但突出显示的Tab仍然停留在仪表板/数据上(值= 2)

我可以通过设置状态来改变,但是当按下浏览器的后退按钮时我不知道如何处理事件？

我发现了这个：

window.onpopstate = this.onBackButtonEvent;

但每次状态改变时都会调用此命令(不仅仅是在后退按钮事件中)

解决方法:

这是一个有点老问题,你可能已经得到了答案,但对于像我这样需要这个问题的人,我会留下这个答案.

使用react-router使这项工作变得简单：

import { browserHistory } from 'react-router';

componentDidMount() {
    super.componentDidMount();

    this.onScrollNearBottom(this.scrollToLoad);

    this.backListener = browserHistory.listen(location => {
      if (location.action === "POP") {
        // Do your stuff
      }
    });
  }

componentWillUnmount() {
    super.componentWillUnmount();
    // Unbind listener
    this.backListener();
}

标签：javascript,reactjs,material-ui,react-router
来源： https://codeday.me/bug/20190927/1822335.html