加载新页面时进行状态更改或页面刷新

Question

我有一个带有汉堡菜单的react应用，该应用可在页面内容上方/下方滑动。我连接了redux来处理sidemenu状态，该状态切换了body和overlay的类，以防止滚动。

当侧面菜单处于活动状态时，当我单击其中的导航链接时，该页面确实会加载新页面，但是侧面菜单仍处于打开状态。

我当前在BrowserRouter中将Switch与Route和App.js一起使用

导航到新页面时如何更改状态？

我考虑的一些事情是：

• 将onClick处理程序添加到每个侧面菜单链接（目前为Link组件）。
• 在每个页面上添加componentDidMount

有更好的方法吗？我不想将onClick事件添加到侧面菜单中以后增加的所有项目中，也不想将componentDidMount也添加到每个页面中。

Answer 1

您可以将路由器连接到菜单组件并检测位置更改：

class Menu extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      /** change redux state here */
    }
  }

  ....
}

export default withRouter(Menu);