在路由更改Next.js上更改状态

嗨，我要在next.js中切换导航，它工作正常，只是我希望导航在路线更改时再次关闭。

例如，如果我在主页上并切换导航，则导航将打开并显示指向“关于”页面的链接。如果单击该链接，将按预期进入“关于”页面-但导航仍处于打开状态！

我已经尝试了一些方法-我想我想利用onRouteChangeComplete（url），但是我正在努力更新navActive状态。

我的page.js文件：

class Page extends Component {
  state = {
    navActive: false
  };

  toggle = () => {
    this.setState({
      navActive: !this.state.navActive
     });
  };

  render() {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage className="full-page-wrapper">
          <Meta />
          <Header navActive={this.state.navActive} toggle={this.toggle} />
          <PrimaryContent>{this.props.children}</PrimaryContent>
          <GlobalStyle />
        </StyledPage>
      </ThemeProvider>
    );
  }
}

然后是我的头文件：

class Header extends React.Component {
  render() {
    return (
      <HeaderSide

        <HeaderToggleBar onClick={() => this.props.toggle()} />

      </HeaderSide>
    );
  }
}

因此，应用程序以navActive状态为false开头，单击HeaderToggleBar元素将打开并关闭导航。但是，当路线改变时，我需要关闭导航。我想我可以将click事件放在标题内的导航项上（以便单击切换到新页面），但这似乎有点过头了。

谢谢。