在加载新页面时响应状态更改或页面刷新

Question

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

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

我目前在App.js 中使用BrowserRouter 和Switch 和Route

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

我考虑的一些事情是：

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

有没有更好的方法？我不想将 onClick 事件添加到 sidemenu 中的所有项目，因为它稍后会增长，我也不想将 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);