Reactjs 路由更改后停止事件侦听

在我的一个组件中，我监听键盘事件，一些键触发某些行为

然而，一旦路由改变，用户导航到另一个组件，我就不想再对键盘事件做出反应。实现这一点的唯一方法是将事件侦听器移动到更高阶的组件，并根据当前活动路由有条件地响应或丢弃事件吗

以下是我的最高阶组件：

class AppRouter extends Router {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Explorer</Link></li>
            <li><Link to="/charts">Charts</Link></li>
          </ul>

          <hr/>

          <Route exact path="/" component={Viewer}/>
          <Route path="/charts" component={Charts}/>
        </div>
      </Router>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <AppRouter />
      </div>
    );
  }
}

---

我找到的解决方案是在卸载组件之前删除事件侦听器。但是，要做到这一点，我需要保留对事件处理程序的引用，该事件处理程序还正确地将

this

绑定到它。以下是我使用的代码：

componentWillMount() {
    this.setState({listener: this.handleKeyDown.bind(this)}, () => document.addEventListener('keydown', this.state.listener));
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.state.listener);
    this.setState({listener: null});
  }

---

我找到的解决方案是在卸载组件之前删除事件侦听器。但是，要做到这一点，我需要保留对事件处理程序的引用，该事件处理程序还正确地将

this

绑定到它。以下是我使用的代码：

componentWillMount() {
    this.setState({listener: this.handleKeyDown.bind(this)}, () => document.addEventListener('keydown', this.state.listener));
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.state.listener);
    this.setState({listener: null});
  }

---

哪个版本的react router？一些只显示问题的示例代码也会有帮助。react router V4哪个版本的react router？一些只显示问题的示例代码也会有帮助。react router V4这正是我要建议的。非常感谢，您帮了大忙！这正是我要建议的。非常感谢你，你帮了我很大的忙！