title: Changing state on route change Next.js
body: <p>I'm toggling navigation in next.js, it works fine, it's just I want the navigation to close again when the route changes.</p>
  <p>For example, if I'm on the home page and toggle the navigation, the navigation opens and shows a link to the about page. If I click that link, I get taken to the about page as expected - but the navigation is still open!</p>
  <p>I've tried a few things - I think I want to utilize
  onRouteChangeComplete(url) but I'm struggling to update the navActive state.</p>
  <p>My page.js file:</p>
  <pre><code>class Page extends Component {
    state = {
      navActive: false
    };
  
    toggle = () =&gt; {
      this.setState({
        navActive: !this.state.navActive
       });
    };
  
    render() {
      return (
        &lt;ThemeProvider theme={theme}&gt;
          &lt;StyledPage className=&quot;full-page-wrapper&quot;&gt;
            &lt;Meta /&gt;
            &lt;Header navActive={this.state.navActive} toggle={this.toggle} /&gt;
            &lt;PrimaryContent&gt;{this.props.children}&lt;/PrimaryContent&gt;
            &lt;GlobalStyle /&gt;
          &lt;/StyledPage&gt;
        &lt;/ThemeProvider&gt;
      );
    }
  }
  </code></pre>
  <p>Then my header file:</p>
  <pre><code>class Header extends React.Component {
    render() {
      return (
        &lt;HeaderSide
  
          &lt;HeaderToggleBar onClick={() =&gt; this.props.toggle()} /&gt;
  
        &lt;/HeaderSide&gt;
      );
    }
  }
  </code></pre>
  <p>So the app starts off with navActive state of false, clicking the HeaderToggleBar element opens and closes the nav. But I need to close the nav when the route changes. I guess I could put the click event on the navigation items within the header (so clicking to a new page toggles) but that seems a bit over the top.</p>
  <p>Thank you.</p>