javascript - 在路由更改时更改状态 Next.js

Question

我在 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>
    );
  }
}

所以应用程序以 false 的 navActive 状态开始，单击 HeaderToggleBar 元素打开和关闭导航。但是当路线改变时我需要关闭导航。我想我可以将点击事件放在标题内的导航项上(这样点击新页面就会切换)，但这似乎有点过头了。

谢谢。

Answer 1

如果您使用的是功能性 React 组件，您可以这样做:

const router = useRouter();

useEffect(() => {
  if (isMenuOpen) {
    setMenuOpen(!isMenuOpen);
  }
}, [router.asPath]);