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

Question

我正在使用 Material-ui 的选项卡，这些选项卡是受控制的，我将它们用于 (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"/>} />

如果我当前正在访问仪表板/数据并单击浏览器的后退按钮 我(例如)转到仪表板/用户，但突出显示的选项卡仍然保留在仪表板/数据上(值=2)

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

我发现了这个:

window.onpopstate = this.onBackButtonEvent;

但每次状态更改时都会调用此函数(不仅在后退按钮事件上)

Answer 1

使用react-router使工作变得简单:

import { browserHistory } from 'react-router';

componentDidMount() {
    this.onScrollNearBottom(this.scrollToLoad);

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

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